1.媒介查詢

2.百分比查詢

3.rem布局

4.視口單位

5.圖片響應(yīng)式

6.網(wǎng)格布局

總結(jié)：響應(yīng)式布局的實現(xiàn)可以通過：媒介查詢+px，媒介查詢+百分比，媒介查詢+rem+js,vm/vh/+rem

flex彈性布局，兼容性差

Grid網(wǎng)格布局，兼容性差

Columns柵格系統(tǒng)，往往需要依賴某個UI庫，如Bootstrap

流式布局

好處：大屏幕下顯示更多的內(nèi)容
壞處：寬屏下比例會有一些不協(xié)調(diào)

配合使用 display:flex;

響應(yīng)式布局

利用媒介查詢，即media queries，可以針對不同的媒體類型定義不同的樣式，從而實現(xiàn)響應(yīng)式布局。

媒體類型

all 用于所有的設(shè)備
print 用于打印機和打印預(yù)覽
screen 用于電腦屏幕，平板電腦，只能手機等
speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
外部引入css文件

link引入css

rem布局

設(shè)置html的font-size

動態(tài)設(shè)置font-size

通過JS設(shè)置
通過vw設(shè)置