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

1. @media screen媒體(tǐ)查詢布局

使用@media媒體(tǐ)查詢針對不同的媒體(tǐ)類型定義不同的樣式，特别是響應式頁面，可以針對不同屏幕的大(dà)小(xiǎo)，編寫多套樣式，從而達到自适應的效果。需要注意的是，使用媒體(tǐ)查詢時要注意書(shū)寫格式，以及優先級問題，不然很有可能導緻媒體(tǐ)查詢失效。

2. 百分(fēn)比%布局

百分(fēn)比是相對于包含塊的計量單位，通過對屬性設置百分(fēn)比來适應不同的屏幕

包含塊：

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

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

(3) 繼承于父元素

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

3. 彈性盒子布局（flex）

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

4. rem布局

rem是相對于根元素的字體(tǐ)大(dà)小(xiǎo)的單位，em隻是一(yī)個相對父元素的字體(tǐ)大(dà)小(xiǎo)的單位。rem布局的本質是等比縮放(fàng)。

5. vw/vh布局

        css3中(zhōng)引入了一(yī)個新的單位vw/vh，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度。 任意層級元素，在使用vw單位的情況下(xià)，1vw都等于視圖寬度的百分(fēn)之一(yī)。

以上内容部分(fēn)來自網絡，侵删。