移動web rem 自適應

2022-06-12 02:27:08 字數 743 閱讀 5961

rem 自適應--的兩種方式: 

rem : font size of root element (根元素的字型大小)

em : font size of element (父元素的字型大小)

1. 基於css即**查詢的來進行螢幕自適應

基與移動端的標準尺寸  640px,各種常見的螢幕尺寸下字型大小

寬度

320px

384px

480px

640px

螢幕對比比例

0.5 

0.60.75

1html font size

10px

12px

15px

20px

元素寬度(px)

100px

120px

150px

200px

元素寬度(rem)

10rem

12rem

15rem

20rem

@media only screen and (min-device-width:320px) ).trigger('resize')

移動端自適應

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...

rem自適應布局 移動端自適應必備

由於移動端特殊性,本文講的是如何使用rem 實現自適應 或叫rem 響應式布局,通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著,我們只需要在根元素確定乙個px字型大小,則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素,可以設定這個基準值 假如瀏覽器的html...