響應式佈局

幾種佈局方式

靜態佈局（static layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作爲單位，這種設計常見於pc端。

流式佈局（Liquid Layout）

• 流式佈局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體佈局不變。代表作柵欄系統（網格系統）

• 屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。

• 使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘可能的適應各種分辨率。往往配合 max-width/min-width等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。

• 在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因爲寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調

自適應佈局（Adaptive Layout）

• 自適應佈局的特點是分別爲不同的屏幕分辨率定義佈局，即創建多個靜態佈局，每個靜態佈局對應一個屏幕分辨率範圍

• 使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的設備最好的體驗，在同一個設備下實際還是固定的佈局。

彈性佈局（rem/em佈局）

• 我們可以通過響應式的設計和開發思路讓頁面更加”彈性”了。圖片的尺寸可以自動調整，頁面布 局再不會被破壞。雖然永遠沒有最完美的方案，但它給了我們更多選擇。無論用戶切換設備的屏幕定向方 式，還是從臺式機屏幕轉到iPad上瀏覽，頁面都會真正的富有彈性。

響應式佈局（Responsive Layout）

• 佈局綜合體
  • 流式佈局（解決屏幕跨度小時的差異）
    
  • 媒體查詢（解決屏幕跨度大）
  • 彈性佈局（解決屏幕跨度下字體間距比例問題）
• 優點：適應pc和移動端，如果足夠耐心，效果完美。

• 缺點：
  （1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。
  （2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。

• 佈局單位的補充：
  https://www.zybuluo.com/buoge/note/990718

結論
1.如果只做pc端，那麼靜態佈局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；
3.如果pc，移動要兼容，而且要求很高那麼響應式佈局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的佈局。
http://www.cnblogs.com/zhuzhenwei918/p/7147303.html

響應式設計快速指南

https://www.kancloud.cn/kancloud/responsive-typography/70844#_20

排版和柵格系統

https://v3.bootcss.com/css/

阮一峯：自適應網頁設計

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

bootstrap 的桎梏

http://www.labazhou.net/2014/10/why-dont-you-use-bootstrap/

https://juejin.im/entry/5922b08ca0bb9f005f629703

uisdc 響應式佈局

http://www.uisdc.com/tag/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1