Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD入門

Bf842e099d0ce0ae415d44b17ead54b2?s=47 suhan
February 28, 2015

 RWD入門

開始踏上旅程吧! (大阪城開始)
有了CSS的基礎後
讓我們也搞懂
這個很夯的RWD到底是怎樣做的!!?

頁數 補充x參考x連結
03. tw.yahoo.com
//雅虎的三個解決方式
05. ●jas9.blogspot.tw/2012/04/html5-polyfillwebshims-lib.html
//HTML5 Polyfill自動補完函式庫:Webshims Lib
08. ●responsive-jp.com
//Responsive Web Design | 日本RWD參考
12.參考來源
www.w3cplus.com/content/css3-media-queries
www.xenyomedia.com/blog/134/responsive-web-design-rwd-%E5%92%8C-adaptive-web-design-awd
www.flycan.com/article/css/css3-media-queries-1149.html
●lms.tzuchi.com.tw/epaper/artical/index.php?id=file/40/digiinfo_5
●blog.macroviz.com/brew-my-own-responsive-grid-system-with-scss/
13. ●v3.bootcss.com

Bf842e099d0ce0ae415d44b17ead54b2?s=128

suhan

February 28, 2015
Tweet

Transcript

  1. 建 議 有 建 議 有 建 議 有 建

    議 有 C S S C S S C S S C S S入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂
  2. None
  3. I P h o n e I P h o

    n e I P h o n e I P h o n e、 、 、 、I P a d I P a d I P a d I P a d行 動 裝 置 大 流 行 行 動 裝 置 大 流 行 行 動 裝 置 大 流 行 行 動 裝 置 大 流 行 → → → → 賈伯斯給間接讓 賈伯斯給間接讓 賈伯斯給間接讓 賈伯斯給間接讓Flash Flash Flash Flash網頁被判死刑 網頁被判死刑 網頁被判死刑 網頁被判死刑 網 頁 設 計 大 變 革 網 頁 設 計 大 變 革 網 頁 設 計 大 變 革 網 頁 設 計 大 變 革 s w f s w f s w f s w f 動 畫 等 技 術 逐 漸 淘 汰 動 畫 等 技 術 逐 漸 淘 汰 動 畫 等 技 術 逐 漸 淘 汰 動 畫 等 技 術 逐 漸 淘 汰 . . . . . . . . . . . . . . . . . . . . . . . . 更 何 況 全 更 何 況 全 更 何 況 全 更 何 況 全 f l a s h f l a s h f l a s h f l a s h 網 站 的 悲 劇 網 站 的 悲 劇 網 站 的 悲 劇 網 站 的 悲 劇 . . . . . . . . . . . . 行 動 版 網 站 的 出 現 頻 率 增 加 行 動 版 網 站 的 出 現 頻 率 增 加 行 動 版 網 站 的 出 現 頻 率 增 加 行 動 版 網 站 的 出 現 頻 率 增 加
  4. • 回歸 回歸 回歸 回歸 傳統方式,回歸局限 傳統方式,回歸局限 傳統方式,回歸局限 傳統方式,回歸局限 table

    自動延伸 • 行動版跟 行動版跟 行動版跟 行動版跟PC PC PC PC版獨立 版獨立 版獨立 版獨立 有的會用JQurey Mobile 設計~ (1)操作方式行動版跟PC版不同,不習慣 (2)想友善,卻沒想到不友善 – 直接js判斷自動跳版,處理上跟操作反而不友善。 – 限制縮放比例未設好,點回PC又字小還不能放大。 • APP 非必要app 怎麼辦? ( 更新、下載、麻煩…. ) 回 歸 需 求 回 歸 需 求 回 歸 需 求 回 歸 需 求 & & & & 問 題 問 題 問 題 問 題 原本漂亮的動畫 原本漂亮的動畫 原本漂亮的動畫 原本漂亮的動畫& & & &轉場替代方案 轉場替代方案 轉場替代方案 轉場替代方案!? !? !? !? GIF.CSS3.Video.Jqurey GIF.CSS3.Video.Jqurey GIF.CSS3.Video.Jqurey GIF.CSS3.Video.Jqurey… … … ….. .. .. ..
  5. HTML5 HTML5崛起 崛起 http://jas9.blogspot.tw/2012/04/html5-polyfillwebshims-lib.html HTML5 Polyfill自動補完函式庫:Webshims Lib

  6. ( (外掛 外掛) )

  7. ( (內掛 內掛) ) ↑ ↑ ↑ ↑

  8. 自適應網頁設計 自適應網頁設計 Responsive Web Design Responsive Web Design http://responsive-jp.com/

  9. None
  10. 分手機版與電腦版 分手機版與電腦版 分手機版與電腦版 分手機版與電腦版 RWD RWD RWD RWD方式 方式 方式

    方式 優點 優點 優點 優點 1.設計自由度比較高: 可以不用顧慮另一邊的編排,進行設計。 2.技術簡單上手: JS語法套用判斷轉入頁即可。 1.會依寬度自動調整編排方式 2.單一網址,集中用戶 3.方式用對可達到效率且快速 4.資訊撈一個地方出來就好 缺點 缺點 缺點 缺點 1. 手機版與桌面版的習慣不同, 可能轉換上比較不順 2. 分散使用紀錄,排名下降 1. 排版需更多考量,花心思構想 2. 技術很新,舊版瀏覽器堪憂 比較 比較! !
  11. 到底是什麼樣技術成 到底是什麼樣技術成 到底是什麼樣技術成 到底是什麼樣技術成RWD? RWD? RWD? RWD?

  12. 由CSS的Media Queries做寬度的判斷點,裡面常用的語法 <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

    @media screen and (max-width: 600px) { 选择器 { 属性:属性值; } } 甚至結合 Grid system Grid system Grid system Grid system Grid system Grid system Grid system Grid system 結合下去的解法!? !? !? !? DW的內建Grid 自由高,但肥大。 或使用別人寫好的CSS framework ! 是初學 是流行 是簡易。經典範例:Bootstrap 但仍有他的缺點在,比如版本升級,因為都打包好了,風格容易相像,不瘦。 參考來源 •http://www.w3cplus.com/content/css3-media-queries •http://www.xenyomedia.com/blog/134/responsive-web-design-rwd-%E5%92%8C-adaptive-web- design-awd •http://www.flycan.com/article/css/css3-media-queries-1149.html •http://lms.tzuchi.com.tw/epaper/artical/index.php?id=file/40/digiinfo_5 •http://blog.macroviz.com/brew-my-own-responsive-grid-system-with-scss/
  13. 令人疑問的 令人疑問的 令人疑問的 令人疑問的? ? ? ? 如果我設計電腦、手機、平版,那我是不是等於設計了三個網站編排,只是RWD作尺寸的切 換?這是有可能的,甚至有可能比你花時間設計兩個版的考量更多。 有沒有更快速的RWD?

    沒錯 如果想要快速三合一 可以參考即溶的 CSS framework~
  14. 自由的精隨,手刻要點 自由的精隨,手刻要點 自由的精隨,手刻要點 自由的精隨,手刻要點 重新打好基礎 重新打好基礎 重新打好基礎 重新打好基礎! ! !

    !
  15. CSS ( Cascading Style Sheets ) 維基上中文翻層疊樣式表 層疊樣式表 層疊樣式表 層疊樣式表,就像蓋房子的磚塊一樣。

    學過DW產生於頁面上 直接式 直接式 直接式 直接式 與 單行式 單行式 單行式 單行式 的style後, 對CSS更進一階的認識。 EX : 選擇器 { 樣式內容 } 讀取的方式,如同一般程式會由上往下,所以如果複寫會以較後的為主。 ---------------------假設同一個CSS檔案中------------------ .Acolor { color: #000 } .Acolor { color: #fff } 最後class是Acolor的會出現 白色的字
  16. 基本CSS的概念-簡單的對照 CSS CSS CSS CSS檔中的語法 檔中的語法 檔中的語法 檔中的語法 Html Html

    Html Html檔中的對應 檔中的對應 檔中的對應 檔中的對應 (EX) (EX) (EX) (EX) 意義 意義 意義 意義 #idCSS <p id=”idCSS”></p> 用id掛樣式 a <a></a> 用HTml 掛樣式 .ClassName <p class=”ClassName”></p> 用Class掛樣式 a[Blank=”top”] <a Blank=”top”></p> 用自由屬性掛樣式 CSS CSS CSS CSS檔中的語法 檔中的語法 檔中的語法 檔中的語法 Html Html Html Html檔中的對應 檔中的對應 檔中的對應 檔中的對應 (EX) (EX) (EX) (EX) 意義 意義 意義 意義 p b <p><b><b/></p> p裡面的b p.b <p class=”b”></p> 只要是class 是 b的p P#b <p id=”b”></p> 哪一個id是 b的p .b <p class=”b”></p> and <a class=”b”></a> 不管是什麼標籤 有class 是b就掛樣式 如何將樣式掛到 如何將樣式掛到 如何將樣式掛到 如何將樣式掛到html html html html中 中 中 中? ? ? ? 掛樣式的關係順序 掛樣式的關係順序 掛樣式的關係順序 掛樣式的關係順序? ? ? ?
  17. a[Blank=”top”]? ? ? ? 這個自定義的情況,排版裝飾這樣的寫法比較不常見, 不過在別人寫好的JQurey小程式中就筆較長出現。 若是非自定義一個比較具體的例子 HTML中EX: <input type="text"

    ......./> 文字框 <input type="button" ......./> 按鈕 CSS中EX: input[type="text"] { 文字框的CSS } input[type="text"] { 按鈕的CSS }
  18. 如何外部 如何外部 如何外部 如何外部CSS? CSS? CSS? CSS? 多網頁共用一個的CSS檔時可以減少重新下載的時間,讓網站讀取更快速。 外部的寫法是在<head></head>中增加以下標籤的方式載入 EX:<link

    rel=stylesheet type="text/css" href="要載入的.css" /> 小補充: 小補充: 小補充: 小補充: 上面的網頁設計大變革,使的以前Flash盛世的動畫or特效重現, 雖然CSS3有小部分的動畫,礙於瀏覽器的限制,方式又做的了改變, 有人說這是優雅的降級,社會又將重回Javascript、Gif的懷抱。 外部 外部 外部 外部JS JS JS JS 的語法 的語法 的語法 的語法 ? <script type="text/javascript" src=" ? <script type="text/javascript" src=" ? <script type="text/javascript" src=" ? <script type="text/javascript" src="要載入的 要載入的 要載入的 要載入的.js"></script> .js"></script> .js"></script> .js"></script>
  19. 文 文 文 文

  20. 行 動 版 行 動 版 行 動 版 行

    動 版 圖 片 式 圖 片 式 圖 片 式 圖 片 式 文 字 文 字 文 字 文 字 ← ← ← ← 模 糊 的 模 糊 的 模 糊 的 模 糊 的 超 可 怕 超 可 怕 超 可 怕 超 可 怕 使 用 真 文 字 使 用 真 文 字 使 用 真 文 字 使 用 真 文 字 → → → → 還 可 還 可 還 可 還 可 選 取 選 取 選 取 選 取 / / / / 方 便 方 便 方 便 方 便 讀 音 讀 音 讀 音 讀 音 http://www.awwwards.com/
  21. • 指定文字的font-family font-family font-family font-family 使用者電腦有,便會使用的優先順序 使用者電腦有,便會使用的優先順序 使用者電腦有,便會使用的優先順序 使用者電腦有,便會使用的優先順序 EX:

    EX: EX: EX: body { body { body { body { font-family: font-family: font-family: font-family:       Helvetica,Arial,“微軟正黑體”,sans-serif; } } } } • 使用掛載字體,提供字型下載,讓使用者有此字體 EX: @font-face { @font-face { @font-face { @font-face { font-family: " font-family: " font-family: " font-family: "王漢宗超明 王漢宗超明 王漢宗超明 王漢宗超明"; "; "; "; src: url(wt005.ttf); src: url(wt005.ttf); src: url(wt005.ttf); src: url(wt005.ttf); } } } } • 使用線上版權字體 使用線上版權字體 使用線上版權字體 使用線上版權字體 EX EX EX EX https://typekit.com/
  22. 圖 圖 圖 圖

  23. 手機跟電腦 手機跟電腦 手機跟電腦 手機跟電腦使用網路的下載量 使用網路的下載量 使用網路的下載量 使用網路的下載量? ? ? ?

  24. 如何 如何 如何 如何縮放圖照片 縮放圖照片 縮放圖照片 縮放圖照片? ? ? ??

    ? ? ? 使用100% auto的方式大圖假縮放外 用HTML5新標籤 就像標籤Video一樣依照不同平台叫圖 <picture> <picture> <picture> <picture> <source srcset="runner-wide.jpg" media="(min-width: 1000px)"> <source srcset="runner-wide.jpg" media="(min-width: 1000px)"> <source srcset="runner-wide.jpg" media="(min-width: 1000px)"> <source srcset="runner-wide.jpg" media="(min-width: 1000px)"> <source srcset="runner-narrow.jpg" media="(min-width: 500px)"> <source srcset="runner-narrow.jpg" media="(min-width: 500px)"> <source srcset="runner-narrow.jpg" media="(min-width: 500px)"> <source srcset="runner-narrow.jpg" media="(min-width: 500px)"> <img src="runner-square.jpg" alt="Photograph of a man running <img src="runner-square.jpg" alt="Photograph of a man running <img src="runner-square.jpg" alt="Photograph of a man running <img src="runner-square.jpg" alt="Photograph of a man running along a pier at sunset, with a harbour in the background"> along a pier at sunset, with a harbour in the background"> along a pier at sunset, with a harbour in the background"> along a pier at sunset, with a harbour in the background"> </picture> </picture> </picture> </picture>
  25. 小結論 RWD中CSS的方式不只一種,需要你的活用, 不管是用別人寫好的組合方式或是可以自己在做變化。 – 好的網站規劃設計使用者角度看得多細緻 – CSS的設計思考 – UI/UX考量與使用者的學習度 –

    寫的規模有多大,重視什麼 – 其他難點,包括合作的經驗,到CSS後續維護的方式 – 其他工具結合功能(JS.SASS.JQurey......) 一起努力學習吧~~