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

1. @media screen媒體查詢布局

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

2. 百分比%布局

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

包含塊：

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

(2) 無父元素相對于可視窗口

(3) 繼承于父元素

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

3. 彈性盒子布局（flex）

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

4. rem布局

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

5. vw/vh布局

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

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