庭喵的出包星球

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

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

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

RWD概念：

1. 寫RWD之後，畫網頁就不用侷限在「應該要把元素擠在中間的DIV裡，中間固定1000寬…」了，放多大都沒關係，不用擔心會造成小螢幕的人的困擾，因為有media query。
2. CSS的宣告上要記得越小螢幕的樣式要放在最後面。例如：先1440→1200→1000→800→700...以此類推。