響應(yīng)式布局是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本，以下是幾種響應(yīng)式布局簡(jiǎn)單介紹。

1. @media screen媒體查詢(xún)布局

使用@media媒體查詢(xún)針對(duì)不同的媒體類(lèi)型定義不同的樣式，特別是響應(yīng)式頁(yè)面，可以針對(duì)不同屏幕的大小，編寫(xiě)多套樣式，從而達(dá)到自適應(yīng)的效果。需要注意的是，使用媒體查詢(xún)時(shí)要注意書(shū)寫(xiě)格式，以及優(yōu)先級(jí)問(wèn)題，不然很有可能導(dǎo)致媒體查詢(xún)失效。

2. 百分比%布局

百分比是相對(duì)于包含塊的計(jì)量單位，通過(guò)對(duì)屬性設(shè)置百分比來(lái)適應(yīng)不同的屏幕

包含塊：

(1) 有父元素相對(duì)于父元素

(2) 無(wú)父元素相對(duì)于可視窗口

(3) 繼承于父元素

需要注意的是它計(jì)算困難，如果定義一個(gè)元素的寬度和高度后，必須對(duì)著設(shè)計(jì)稿，換算成百分比單位。各個(gè)屬性中如果使用百分比，相對(duì)父元素的屬性并不是唯一的。所以一般不建議使用%來(lái)做響應(yīng)式。

3. 彈性盒子布局（flex）

彈性布局是一種十分方便的，只需要依賴(lài)于CSS樣式的實(shí)現(xiàn)響應(yīng)式布局的方式，它會(huì)給子元素提供強(qiáng)大的空間分配和對(duì)齊能力。需要注意的是定義時(shí)要將flex定義在父元素，把父元素做為‘容器’，然后改變內(nèi)部子元素的排列方式。在設(shè)置flex布局后，子元素中的float、clear都會(huì)失效。父元素設(shè)置display:flex后他的子元素都會(huì)變成塊級(jí)元素。它有一個(gè)缺點(diǎn)是只能依靠自身的布局模式，稍有變化則無(wú)法改變。

4. rem布局

rem是相對(duì)于根元素的字體大小的單位，em只是一個(gè)相對(duì)父元素的字體大小的單位。rem布局的本質(zhì)是等比縮放。

5. vw/vh布局

        css3中引入了一個(gè)新的單位vw/vh，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度。 任意層級(jí)元素，在使用vw單位的情況下，1vw都等于視圖寬度的百分之一。

以上內(nèi)容部分來(lái)自網(wǎng)絡(luò)，侵刪。