說明：

　　這幾天公司要求網(wǎng)站實現(xiàn)響應(yīng)式布局，所以對響應(yīng)式布局進行了相對全面的了解，并做了幾個實例。

響應(yīng)式布局介紹

參考： 維基百科， CSS3 @media 查詢， Bootstrap中文官網(wǎng)， 鄙視IE， 2014年5個最流行前端框架對比， 自適應(yīng)網(wǎng)頁設(shè)計-阮一峰， 響應(yīng)式網(wǎng)頁設(shè)計， 響應(yīng)式布局-百度百科， 響應(yīng)式網(wǎng)站設(shè)計原則， 響應(yīng)式布局這件小事， 響應(yīng)式 Web 設(shè)計新原則， 什么是響應(yīng)式布局設(shè)計？， 自適應(yīng)與響應(yīng)式的區(qū)別， Foundation中文網(wǎng)

?

響應(yīng)式布局是什么意思？

? ? ?響應(yīng)式布局可以根據(jù)不同的瀏覽設(shè)備（PC端，平板，智能手機等）呈現(xiàn)不同的網(wǎng)頁布局，同時減少縮放、平移和滾動。

? ? ?適應(yīng)移動端的大趨勢，提高用戶體驗，減少開發(fā)成本。

為什么要使用響應(yīng)式布局？

? ? ?主要是使網(wǎng)頁適用于用于移動端設(shè)備，屏幕分辨率是出現(xiàn)的最大的兼容性問題。

? ? ?可以為不同的設(shè)備提供不同的網(wǎng)站，也就是同一網(wǎng)站做普通PC端和移動端兩種頁面。不論是前期的開發(fā)還是后期的維護改版，都非常的麻煩。

響應(yīng)式布局的缺點？

? ? ?兼容代碼多，工作量大

設(shè)計原則？適合什么樣的項目？

? ? ?向下兼容，移動優(yōu)先。

? ? ?對于非常復(fù)雜的網(wǎng)頁布局，不適合進行網(wǎng)頁自適應(yīng)的布局，原因之一是實現(xiàn)成本太高，其次就是復(fù)雜頁面（例如容商網(wǎng)首頁，中國企業(yè)集群首頁等）也不適合移動端的瀏覽。

其他的響應(yīng)式布局的框架？

? ? ?Prue框架是Yahoo的一款輕量級的框架，兼容IE7以上，性能好，但是中文文檔少，不利于團隊開發(fā)，沒有組件。

? ? ?Foundation by ZURB，次于Bootstrap，重量級，362K大小

Bootstrap優(yōu)勢 ？

? ? ? 學(xué)習(xí)成本低

? ? ?是目前最流行的自適應(yīng)框架

? ? ?性能非常好，最基礎(chǔ)的文件大小只有149.1k

? ? ? ? ?? bootstrap.min.js ? ? 35.1k

? ? ? ? ??bootstrap.min.css ? 114k

? ? ? 中文文檔完善，還有全套的視頻教程

? ? ?有許多組件可以選擇，如 Bootstrap switch，Sco.js，F(xiàn)lat UI等，便于快速開發(fā)

? ?? ?兼容性

Chrome Firefox Internet Explorer Opera Safari Android iOS Mac OS X Windows

?
?支持	?支持	N/A	?不支持	N/A
?支持	N/A		?不支持	?支持
?支持	?支持		?支持	?支持
?支持	?支持	?支持	?支持	?不支持

? ? ? ? ? windows平臺，支持IE8，如果不用框架則需要IE9以上支持,而且通過插件Bsie（鄙視IE）可以兼容IE6。

?

響應(yīng)式布局實例

響應(yīng)式頁面實例地址

? ? ? http://xys.laiwanapp.com/bootstrap-1/

? ? ? http://xys.laiwanapp.com/bootstrap-2/

? ? ? http://xys.laiwanapp.com/bootstrap-3/

?

兼容性問題（分辨率分解-*~768手機,768~992平板,992~1200普通PC,1200~*大屏幕PC）

? ? ?

?	chrome18	firefox11（firefox3.6）	IE7（較少用戶）	IE8（主流）	IE9（代表最新版本）	IE6
實例1-微博	無	無（無圓角）	無	無	無	崩潰
實例2-相冊	圓角錯誤	無圓角（無圓角，不支持背景尺寸屬性）	無	無	無	崩潰
實例3-博客	圓角錯誤	無圓角，?進度條無動畫（無圓角，進度條無動畫）	無	無	無	崩潰
其它	?	?	?	?	?	?

?

說明

chrome18和firefox都是舊版本的，用戶非常少

不支持背景屬性可以用position和z-index屬性解決

IE6崩潰可以使用針對Bootstrap的插件Bsie解決大部分，但如果不要求對IE6支持，不建議使用，影響性能

下圖分別是無圓角，正常圓角，圓角錯誤，圓角是CSS3屬性，所以會出現(xiàn)兼容問題，但IE7以上都支持，已經(jīng)很好了（w3school說IE9以上才支持，說明使用了css hack）

總結(jié)：支持主流瀏覽器，舊版本的瀏覽器出現(xiàn)的兼容性問題不大。

　　

?

?

其它需要改進

? ? ?

?

移動端測試

兼容性問題（分辨率分解-

1. ? ? *~768手機，1欄

2. ? ? 768~992平板 ，2欄

3. ? ? 992~1200普通PC ，2欄

4. ? ? 1200~*大屏幕PC ，3欄

）

?

分辨率dpi	ppi	型號	豎	橫
2560x1536	546	MX4 pro	1	1
720x1280	?	華為榮耀3c	1	1
1200x1920	?	華為 x1 7.0	1	2
?	?	?	?	?
?	?	?	?	?

?

由于現(xiàn)在沒有平板電腦，沒有辦法測試，等測試后會補全。

?

另外不知道為什么2560x1536分辨率不能顯示三欄而是只顯示一欄，不知道dpi和ppi是什么意思，希望知道的大牛請回復(fù)，謝謝！^_^