http://learn.shayhowe.com/advanced-html-css/responsive-web-design

LESSON 4 Responsive Web Design

因為移動裝置的崛起，移動裝置的網路用量使用量也越來越高，根據調查跟統計，移動裝置的網路使用量在近幾年，很有可能會超越桌上型電腦的使用量。

要怎麼讓網站可以適應所有的裝置，就是所謂的 Respoinsive Web Design，簡稱 RWD

HTML

1. Responsive Overview
   適用於各種裝置的螢幕大小，RWD提供流暢的閱讀經驗；閱讀書籍 Resonsive Web Design
2. Viewport (Responsive vs. Adaptive vs. Mobile)

• Responsive 的意思是始可以快速的反應各種改變 (瀏覽器、系統...)
• Adaptive 的意思是可以針對需求跟狀態，做簡單的異動
  使用預設特定的一些元素，針對不同因素作連續跟流暢的反應跟改變就是 Resposive 跟 Adaptive 最好的結合。
• 我們通常會針對Mobile建立一個完全不同的網站樣貌，這不是一個好的Idea，需要更多的工程成本。
• 最近有很多解決 Resposive Web Design 的方式，使用動態支援各種 Viewport，可以滿足上述的三種需求。

CSS

1. Flexible Layouts

• Flexible grid 動態改變寬度 最常使用的就是百分比為單位或是使用em
• CSS3 Viewport

• vw : Viewport width
• vh : Viewport height
• vmin : minimum of the Viewport’s height and width
• vmax : maximum of the Viewport’s height and width

• 不建議使用固定的測量標準，例如 pixels, inches
  因為 Viewport 會隨著裝置改變，網站的 layout 需要適應各種彈性修改，Ethan提出一格簡單的公式  target / context = result
• 作者舉例一個使用百分比的控制 margin 的方式來替代固定寬度的 px

2. Mdeia Queries (IE9以上)

• Initializing Media Queries
  使用 @media @import
  常用的 media types all, screen, print, tv & braille

HTML

1. <!-- Separate CSS File -->
2. <link href="styles.css" rel="stylesheet"
3. media="all and (max-width: 1024px)">

CSS

1. /* @media Rule */
2. @media all and (max-width: 1024px) {...}
3. /* @import Rule */
4. @import url(styles.css) all and (max-width: 1024px) {...}

• Logical Operators in Media Queries
  三種邏輯判斷 and, not & only
  @media all and (min-width: 800px) and (max-width: 1024px) {...}
  @media not screen and (color) {...}
  @media only screen and (orientation: portrait) {...}
• Media Features in Media Queries

• Height & Width Media Features 高度跟寬度
  @media all and (min-width: 320px) and (max-width: 780px) {...}

• Orientation Media Feature 方向
• Aspect Ratio Media Features 偵測比值
• Resolution Media Features
• Other Media Features

• browser 限制 IE 8 以下不適用

• Media Queries Demo
  

3. Mobile First

• Mobile First Design

4. Viewport

• Height & Width
• Viewport Scale
• Viewport Resolution
• Cimbining Viewport Values

5. Flexible Media

• Flexible Embedded Media

書本：http://www.flexiblewebbook.com/bonus.html