響應式佈局

幾種佈局方式

靜態佈局（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