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

Transcript

1. 建 議 有 建 議 有 建 議 有 建 議 有 C S S C S S C S S C S S入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂 入 門 經 驗 再 看 起 來 會 比 較 易 懂
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/
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 使用者電腦有，便會使用的優先順序 使用者電腦有，便會使用的優先順序 使用者電腦有，便會使用的優先順序 使用者電腦有，便會使用的優先順序 ＥＸ： ＥＸ： ＥＸ： ＥＸ： body { body { body { body { font-family: font-family: font-family: font-family:　 　 　 　Helvetica,Arial,“微軟正黑體”,sans-serif; ｝ ｝ ｝ ｝ • 使用掛載字體，提供字型下載，讓使用者有此字體 ＥＸ： @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); } } } } • 使用線上版權字體 使用線上版權字體 使用線上版權字體 使用線上版權字體 ＥＸ ＥＸ ＥＸ ＥＸ 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......) 一起努力學習吧~~