概念

2010年,Ethan Marcotte提出了"自適應網頁設計"(Responsive Web Design)這個名詞,
指可以自動識別屏幕寬度、並做出相應調整的網頁設計。
他製作了一個範例,裡面是《福爾摩斯歷險記》六個主人公的頭像。



開始實行

1. Viewport設定
如果網頁的標頭沒有做這組設定的話,手機會以高解析度來呈現畫面,這就讓字變得很小。(就是手機看PC網站)

<meta name="viewport" content="width=device-width, initial-scale=1" />
//viewport 是網頁默認的寬度和高度。
//width=device-width 網頁寬度默認等於屏幕寬度
//initial-scale=1 原始縮放比例為1.0,即網頁初始大小占屏幕面積的100%。


由於舊瀏覽器(IE6、7、8)不支援,所以需要使用:css3-mediaqueries.js

<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
  <![endif] -->



2. 不使用絕對寬度
由於網頁會根據屏幕寬度調整佈局(流體佈局),所以不能使用絕對寬度的佈局,也不能使用具有絕對寬度的元素。


3.相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。

body { font: normal 100% Helvetica, Arial, sans-serif; } /*字體大小是頁面默認大小的100%,即16像素。*/
h1 { font-size: 1.5em; }                                 /*h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。*/
small { font-size: 0.875em; }                           /* small的大小是默認大小的0.875倍,即14像素(14/16=0.875)。 */

文章 - 響應式設計:使用響應式字體



4.流動佈局(fluid grid)
意義:各個區塊的位置都是浮動的,不是固定不變的。
*注意:絕對定位(position: absolute)的使用,也要非常小心。

/* float的好處是,如果寬度太小,放不下兩個元素,
後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。 */
.main { float: right; width: 70%; }
.leftBar { float: left; width: 25%; }



5.CSS
RWD的核心就是CSS3的Media Query。
同一個CSS文件中,也可以根據不同的屏幕,選擇應用不同的CSS規則。之後會有詳細的說明....

/* 屏幕寬度小於400像素 */
@media screen and (max-device-width: 400px) {
    .column { 
        float: none; 
        width:auto; 
    }
    #sidebar { 
        display:none; 
    }
}


其他

網站分享

  1. 50款Responsive Web Design的網站版型
  2. 大量的Responsive Web Design網站內容
  3. 5個實用的RWD設計版型模式




RWD 語法相容

  1. 相容到IE6-8
  2. 跨瀏覽器兼容性

免費HTML版型

  1. 20 Free Responsive HTML & CSS Templates
  2. 30 Free and Premium HTML/CSS Responsive Website Templates
  3. 10 Free RWD Templates

RWD CSS常見問題

  1. 選單呈現方式
  2. 選單實作方法
  3. table資料列表呈現方式

RWD內嵌響應問題
http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html


Jquery套件

  1. 輕量的JS ul li選單會轉換成小型下拉選單
  2. 30 JQUERY RESPONSIVE LAYOUT PLUGINS
  3. 10 Best Responsive jQuery Slider Plugins
  4. RWD圖片輪播套件
  5. 底片圖片輪播套件
  6. 輕型 - 圖片輪播套件
  7. Responsive Tables
  8. 針對 Mobile Web 開發,可以讓 HTML 元素呈現動態物理效果

    效果:

    1. 仿舊 Facebook App 聊天頭像的拖曳刪除操作
    2. 仿 iOS 7 下拉通知中心的下拉選單
    3. 慣性捲動
    4. 可折疊的封面
    5. 彈性捲動
  9. 當載入網路字型可能會影響網頁效能時 套件

    當載入網路字型可能會影響網頁效能時,會讓行動裝置用戶有不佳的瀏覽體驗,
    例如部份瀏覽器會顯示空白頁面。那麼該如何解決這個問題呢? Web Font Loader 或許就是答案了。
    Web Font Loader 會透過動態新增頁面元素的 CSS class ,來協助開發者晚期載入網路字型,避免瀏覽器無法顯示字型的問題。
    另外它也支援 timeout 設定,讓字型下載時間過長時放棄執行。
    http://www.sitepoint.com/improve-page-performance-font-loader/


MOBILE HTML5 FRAMEWORKS

  1. http://codegeekz.com/mobile-frameworks-for-developers/
  2. http://www.gajotres.net/top-7-mobile-application-html5-frameworks/
  3. JQuery Mobile
  4. kendo-ui

RWD線上檢測工具
可使用chrome的開發工具或以下網站

  1. 可直接同步瀏覽常見解析度畫面
  2. 提供的載具與瀏覽器版本頗豐富
  3. 可直接瀏覽各載具呈現出來的畫面



測試要點
http://blog.evendesign.tw/post/48853824439/rwd-test


參考:
http://sam0512.blogspot.tw/2012/11/responsive-web-design.html#more
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://blog.evendesign.tw/post/48853824439/rwd-test
http://fundesigner.net/responsive-menu/
http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
http://fundesigner.net/css3-media-queries/
http://fundesigner.net/responsive-toggle-menu/
http://www.w3cplus.com/css3/10-basic-tips-about-responsive-design.html
http://www.w3cplus.com/css3/responsive-web-design.html

關於作者

  • 羅拉拉 / 前端工程師
  • 我的理念是:不是只要好看,還要好用,不只要好用,還要好維護。
  • Blog
  • facebook

關於作者

  • Luki / 前端工程師
  • 冷靜思考,沉著應對。
  • Blog
  • facebook

關於作者

cythilya

  • Cythilya / 前端工程師
  • SEO & Social Media
  • Blog
  • Facebook
Author:Grace
Author:Ryan
Author:Winston
Author:Ader