媒體查詢media screen
在能夠初步判斷目標用戶的分辨率的前提下,針對改分辨率下的樣式做特殊處理。我們在做web頁面時最常用的單位就是像素(px),但如果使用固定像素,會導致某些分辨率小的電腦可能會顯示不全內(nèi)容。所以我們使用媒體查詢判斷寬度或高度是否小于某個值來替代css內(nèi)容達成自適應。
vw和vh
vw和vh會把視窗的高度分成100份,100vw就是寬度鋪滿,100vh同理,這樣我們只需要做一個分辨率下的內(nèi)容,內(nèi)容的寬度和高度會根據(jù)視口的大小自動增減
百分比
寬高可以使用百分比來設置,他們的內(nèi)容是基于父元素而不是視圖,這也是和vw和vh不同的地方。
rem
記得我們之前寫過的移動端自適應嘛,就是使用的這個,了解詳情可以點擊這里。
rem 相對長度單位,相對于根元素的 font-size 值,頁面中的根元素只有一個(即 html 標簽),標準統(tǒng)一,可用于響應式布局。
我們使用js,根據(jù)頁面的高度調(diào)整根元素的font-size的值,然后使用rem作為單位就能實現(xiàn)自適應,多用于移動端自適應。
上一篇: 前端表單常見問題
下一篇: vue使用el-dialog打開彈窗