什麼是響應式網頁設計？

響應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念能夠說是爲移動互聯網而生的！

怎麼作？

其實響應式網頁的實現很簡單，都是你們熟悉的技術。

media query(媒體查詢)

由於如今主流的智能終端都是基於iOS和Android的，而它們自帶的瀏覽器都是基於webkit內核，因此咱們能夠徹底使用viewport屬性和media query技術實現網站的響應性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

後面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味着不能進行縮放。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ } }   /* for 360px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:360px){ selector{ } }   /* for 480 px width screen */ @media only screen (min-device-width:361px)and (max-device-width:480px){ selector{ } }

固然依靠屏幕寬度來進行適配是最簡單的方法，media query有不少參數可使用好比orientation、aspect-ratio等。

其實，media query是響應式網頁設計中被用到最多的技術。

不足之處

若是你關注網站性能之類的話，可能已經發現了一些問題：

• 加載不少不須要的資源，好比多餘的圖片和樣式內容
• 帶寬限制
• 移動終端的內存和CPU限制
• 圖片大小和屏幕大小不匹配

嗯，任何一個方案都不是完美的，但也不會很糟糕。下面咱們會提到一些可行的優化方案：

響應式網頁設計工具與資源

國外在響應式網頁設計上已經走的很遠了，已經有不少工具和資源供咱們參考和使用：

CSS 框架

• 320 and Up
• Mobile Boilerplate
• Golden Grid System
• Gridless
• Less Framework
• 1140 CSS Grid System
• Fluid 960 Grid System
• SimpleGrid
• Skeleton

實用工具

• Respond.js，讓IE6-8支持meidia query
• Responsive Design Testing 簡單而方便的測試網站的響應性的工具，輸入網址便可看到網站在不一樣分辨率下的表現
• Resize My Browser 縮放瀏覽器工具，不過不支持chrome和opera瀏覽器
• Media Query Bookmarklet 顧名思義，這是一個關於media query的書籤工具
• ProtoFluid 在線查看和調試網站對移動終端兼容性的工具，很贊
• ScreenFly 和ProtoFluid相似
• responsivepx 更直觀的測試網站對不一樣分辨率的適配性

爭論和總結

響應式網頁設計被提出以來，爭論就不斷，其實核心問題只有兩個個：太多的資源請求和有限的終端支持之間的矛盾、響應式的網頁設計和移動終端在用戶體驗和視覺風格上的差別。前者不能容忍在弱小的手機/平板上經過龜速的3G/2G網絡來加載一個笨重的PC端頁面，然後者糾結響應式網站不像手機網站。