媒體查詢(xún)media screen

在能夠初步判斷目標(biāo)用戶(hù)的分辨率的前提下，針對(duì)改分辨率下的樣式做特殊處理。我們?cè)谧鰓eb頁(yè)面時(shí)最常用的單位就是像素（px），但如果使用固定像素，會(huì)導(dǎo)致某些分辨率小的電腦可能會(huì)顯示不全內(nèi)容。所以我們使用媒體查詢(xún)判斷寬度或高度是否小于某個(gè)值來(lái)替代css內(nèi)容達(dá)成自適應(yīng)。

vw和vh

vw和vh會(huì)把視窗的高度分成100份，100vw就是寬度鋪滿(mǎn)，100vh同理，這樣我們只需要做一個(gè)分辨率下的內(nèi)容，內(nèi)容的寬度和高度會(huì)根據(jù)視口的大小自動(dòng)增減

百分比

寬高可以使用百分比來(lái)設(shè)置，他們的內(nèi)容是基于父元素而不是視圖，這也是和vw和vh不同的地方。

rem

記得我們之前寫(xiě)過(guò)的移動(dòng)端自適應(yīng)嘛，就是使用的這個(gè)，了解詳情可以點(diǎn)擊這里。

rem 相對(duì)長(zhǎng)度單位，相對(duì)于根元素的 font-size 值，頁(yè)面中的根元素只有一個(gè)（即 html 標(biāo)簽），標(biāo)準(zhǔn)統(tǒng)一，可用于響應(yīng)式布局。

我們使用js，根據(jù)頁(yè)面的高度調(diào)整根元素的font-size的值，然后使用rem作為單位就能實(shí)現(xiàn)自適應(yīng)，多用于移動(dòng)端自適應(yīng)。