Web Design：RWD網站建立重點整理 @ 庭喵的出包星球

這篇整理一些Responsive Website Design的教學重點，還有一些參考文章

CSS設定box-sizing:border-box
CSS設定 img{max-width:100%}避免影像超出父元素寬度
在head中必加這段原始碼 <meta name="viewport" content="width=device-width, initial-scale=1">
使用media query判定裝置寬度：@media only screen and {}
字體都用em、許多寬高也可使用em（相對尺寸單位）
使用方法讓影像RWD化，例如data-fullsrc屬性（隨不同寬度變更圖檔）降低使用者讀取圖片負擔
RWD設計需先從最小寬度著手設計
響應式影片可利用CSS定位製作relative容器(padding-bottom: 56.25%)absolute的<iframe>(有詳細寫法)
善用公式製作寫CSS容器寬度【target ÷ context = result】
icon可使用圖示字型來取代

詳細文章解析：

RWD重點總匯文章：

★★★★★ 五星首選
Responsive Web Design By Learn to Code Advanced
懶人包，重點整理響應式網頁撰寫方法。
Responsive Web Design: What It Is and How To Use It By Kayla Knight
懶人包，整理響應式網頁設計應該注意的地方。

其它：

Responsive Web Design By ETHAN MARCOTTE

How Fluid Grids Work in Responsive Web Design by 1stwebdesigner

Understanding the fluid grid: part one by David Little
50 Useful Responsive Web Design Tools For Designers By Aritra Roy

5 useful CSS tips for responsive design by Rachel Vasquez

這篇教一些很實用的RWD CSS寫法

CSS設定box-sizing:border-box
CSS設定 img{max-width:100%}避免影像超出父元素寬度
在head中必加這段原始碼 <meta name="viewport" content="width=device-width, initial-scale=1">
使用media query判定裝置寬度：@media only screen and {}
字體都用em、許多寬高也可使用em（相對尺寸單位）
使用方法讓影像RWD化，例如data-fullsrc屬性（隨不同寬度變更圖檔）降低使用者讀取圖片負擔
讓圖片響應式化的方法：
Responsive Images – 6 Techniques
5 Methods To Serve True Responsive Images
RWD設計需先從最小寬度著手設計
響應式影片可利用CSS定位製作relative容器(padding-bottom: 56.25%)absolute的<iframe>(有詳細寫法)
善用公式製作寫CSS容器寬度【target ÷ context = result】
icon可使用圖示字型來取代
推薦工具：
Fontello - icon fonts generator
Font Awesome