久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

07
2024/09

頁面自適應常用的幾種方式

發(fā)布時間:2024-09-07 11:27:20
發(fā)布者:dzw
瀏覽量:
0
  1. 媒體查詢media screen

    在能夠初步判斷目標用戶的分辨率的前提下,針對改分辨率下的樣式做特殊處理。我們在做web頁面時最常用的單位就是像素(px),但如果使用固定像素,會導致某些分辨率小的電腦可能會顯示不全內(nèi)容。所以我們使用媒體查詢判斷寬度或高度是否小于某個值來替代css內(nèi)容達成自適應。

    image

  2. vw和vh

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

  3. 百分比

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

  4. rem

    記得我們之前寫過的移動端自適應嘛,就是使用的這個,了解詳情可以點擊這里

    rem 相對長度單位,相對于根元素的 font-size 值,頁面中的根元素只有一個(即 html 標簽),標準統(tǒng)一,可用于響應式布局。

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

關鍵詞:
返回列表