解釋響應(yīng)式布局？

1.原生代碼實(shí)現(xiàn)。

在國(guó)內(nèi)目前設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，一般會(huì)分成PC端和移動(dòng)端兩套頁(yè)面，但在一定的情況下，必須滿足只設(shè)計(jì)一個(gè)頁(yè)面的情況下，滿足不同端口都能正常使用，

因此會(huì)用用到自適應(yīng)的方法。

用原生代碼實(shí)現(xiàn)的根本在于媒體查詢@media的設(shè)置。

@media screen 可以查詢當(dāng)前瀏覽器的尺寸，因此可采用該方法對(duì)同一個(gè)頁(yè)面設(shè)置不同的CSS樣式，來(lái)滿足不同分辨率要求。

2.采用bootstrap框架布局

bootstrap框架布局完成的頁(yè)面，是自動(dòng)對(duì)應(yīng)的自適應(yīng)效果。

但是在書(shū)寫(xiě)的時(shí)候，應(yīng)該嚴(yán)格按照bootstrap的書(shū)寫(xiě)規(guī)范，才不會(huì)出現(xiàn)怪異性問(wèn)題。

寫(xiě)法舉例：

說(shuō)明：最后的數(shù)字對(duì)應(yīng)該div所占柵欄的列數(shù)。

col-md-6 代表在PC端上顯示在一行的6個(gè)柵欄，也就是一半。

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

col-xs-12 代表在手機(jī)端顯示為當(dāng)前行的百分之百填充。

3.還有其他方式，如JQuery和專門(mén)做響應(yīng)式的JS文件，比如nicebox均能實(shí)現(xiàn)自適應(yīng)效果，實(shí)現(xiàn)響應(yīng)式布局。