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)

CSS

  1. Flexible Layouts
  1. Mdeia Queries (IE9以上)
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) {...}

  1. Mobile First
  1. Viewport
  1. Flexible Media

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