HTML5中響應(yīng)式布局怎么弄？什么是響應(yīng)式布局？響應(yīng)式布局（Responsive layout）是一組由PC和移動終端共同使用的接口。當(dāng)用戶的瀏覽設(shè)備發(fā)生變化時，界面也會做出相應(yīng)的變化，這樣就不需要維

HTML5中響應(yīng)式布局怎么弄？

什么是響應(yīng)式布局？響應(yīng)式布局（Responsive layout）是一組由PC和移動終端共同使用的接口。當(dāng)用戶的瀏覽設(shè)備發(fā)生變化時，界面也會做出相應(yīng)的變化，這樣就不需要維護兩套代碼，修改維護部署也非常方便。目前，響應(yīng)式布局基本上是利用CSS媒體查詢功能實現(xiàn)的，主流框架是引導(dǎo)、基礎(chǔ)等。

解釋響應(yīng)式布局，怎么實現(xiàn)的？有幾種方法實現(xiàn)？

1. 本機代碼的實現(xiàn)。

目前國內(nèi)網(wǎng)頁設(shè)計一般分為PC端和移動端兩類。但是，在某些情況下，只需設(shè)計一個頁面就可以正常使用不同的端口，因此采用了自適應(yīng)的方法。

使用本機代碼的根源是media query@media的設(shè)置。

@Media screen可以查詢當(dāng)前瀏覽器的大小，因此可以使用此方法為同一頁面設(shè)置不同的CSS樣式，以滿足不同分辨率的要求。

2. 使用bootstrap framework layout

bootstrap framework layout完成頁面自動對應(yīng)的自適應(yīng)效果。

但是，在編寫時，我們應(yīng)該嚴(yán)格遵循bootstrap的編寫標(biāo)準(zhǔn)，這樣就不會出現(xiàn)奇怪的問題。

注意：最后一個數(shù)字對應(yīng)于Div占用的列數(shù)。

Col-md-6表示六個圍欄，或其中的一半，在PC側(cè)顯示為一行。

Col-sm-6表示div也顯示在平板電腦上，占當(dāng)前行的一半。

Col-xs-12表示移動終端上顯示的當(dāng)前行的100%填充。

3. 還有其他方法，如jQuery和響應(yīng)JS文件，如nicebox，可以實現(xiàn)自適應(yīng)效果和響應(yīng)布局。