響應式佈局及bootstrap（實例）

說明：

　　這幾天公司要求網站實現響應式佈局，因此對響應式佈局進行了相對全面的瞭解，並作了幾個實例。

　　轉載請註明源地址，謝謝^_^， http://www.cnblogs.com/liu-zhen/p/4493679.html

---

響應式佈局介紹

參考： 維基百科， CSS3 @media 查詢， Bootstrap中文官網， 鄙視IE， 2014年5個最流行前端框架對比， 自適應網頁設計-阮一峯， 響應式網頁設計， 響應式佈局-百度百科， 響應式網站設計原則， 響應式佈局這件小事， 響應式 Web 設計新原則， 什麼是響應式佈局設計？， 自適應與響應式的區別， Foundation中文網

 

響應式佈局是什麼意思？

     響應式佈局能夠根據不一樣的瀏覽設備（PC端，平板，智能手機等）呈現不一樣的網頁佈局，同時減小縮放、平移和滾動。

     適應移動端的大趨勢，提升用戶體驗，減小開發成本。

爲何要使用響應式佈局？

     主要是使網頁適用於用於移動端設備，屏幕分辨率是出現的最大的兼容性問題。

     能夠爲不一樣的設備提供不一樣的網站，也就是同一網站作普通PC端和移動端兩種頁面。不管是前期的開發仍是後期的維護改版，都很是的麻煩。

響應式佈局的缺點？

     兼容代碼多，工做量大

設計原則？適合什麼樣的項目？

     向下兼容，移動優先。

     對於很是複雜的網頁佈局，不適合進行網頁自適應的佈局，緣由之一是實現成本過高，其次就是複雜頁面（例如容商網首頁，中國企業集羣首頁等）也不適合移動端的瀏覽。

其餘的響應式佈局的框架？

     Prue框架是Yahoo的一款輕量級的框架，兼容IE7以上，性能好，可是中文文檔少，不利於團隊開發，沒有組件。

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

Bootstrap優點 ？

      學習成本低

     是目前最流行的自適應框架

     性能很是好，最基礎的文件大小隻有149.1k

           bootstrap.min.js     35.1k

          bootstrap.min.css   114k

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

     有許多組件能夠選擇，如 Bootstrap switch，Sco.js，Flat UI等，便於快速開發

      兼容性

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	支持	支持	N/A	不支持	N/A
iOS	支持	N/A		不支持	支持
Mac OS X	支持	支持		支持	支持
Windows	支持	支持	支持	支持	不支持

          windows平臺，支持IE8，若是不用框架則須要IE9以上支持,並且經過插件Bsie（鄙視IE）能夠兼容IE6。

 

響應式佈局實例

響應式頁面實例地址

      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屬性，因此會出現兼容問題，但IE7以上都支持，已經很好了（w3school說IE9以上才支持，說明使用了css hack）

且官方文檔裏說明說明了這一點：http://v3.bootcss.com/css/#images-shapes

總結：支持主流瀏覽器，舊版本的瀏覽器出現的兼容性問題不大。

　　

 

 

其它須要改進

     

 

移動端測試

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

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欄
800x1280（平板）		toshiba wt8a(win 8.1系統)	2欄	3欄
1366x768		Acer win8.1	-	-

 

---

 

另外不知道爲何2560x1536分辨率不能顯示三欄而是隻顯示一欄，不知道dpi和ppi是什麼意思，但願知道的大牛請回復，謝謝！^_^