移動端自適應個人理解與收集 rem

2021-09-24 07:02:19 字數 626 閱讀 1822

rem——更好的適配移動端。這個單位我一直想弄個究竟,今天終於看了個差不多。看了很多的部落格。心中總算有自己的想法。(還有vh,vw這裡我這個小白還沒有弄明白就先不寫了。)

1.rem可以在html,body下設定font-size的大小,然後根據 根元素的大小來進行兌換。eg:根元素大小設定為:font-size:100px;有乙個div寬度為50px,這樣就可以寫成——width:0.5rem

2.一般移動端的設計圖為640px/750px 因為手機額dpr為2。只有蘋果的plus為3,並且寬度為414.以750的設計圖為例,這個時候你只需要在你的**中插入下面的**

複製**
引入這段**你就可以根據你原來的設計圖進行對寬高轉換成rem了同樣是1rem=100px;

引入這段**是根據設計圖1rem:75px來計算的。

複製**
3.還有乙個很好的是hotcss.js。他不是乙個框架,也不是乙個ui庫 。設定的字型的單位是px,不用通過自己計算自動轉換成rem。他可以更大程度解決不清晰的問題。

移動端自適應個人理解與收集 rem

rem 更好的適配移動端。這個單位我一直想弄個究竟,今天終於看了個差不多。看了很多的部落格。心中總算有自己的想法。還有vh,vw這裡我這個小白還沒有弄明白就先不寫了。1.rem可以在html,body下設定font size的大小,然後根據 根元素的大小來進行兌換。eg 根元素大小設定為 font ...

移動端自適應

1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...

移動端自適應

width device width width為設定layout viewport 的寬度,為乙個正整數,width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值,可以是乙個帶小數的數字,1.0就是佔網頁的100 mi...