移動端適配

2022-07-25 23:21:19 字數 709 閱讀 8737

移動端適配:

em單位:瀏覽器預設的是1em=16px,由於em是相對于父元素大小決定的,要經常計算很麻煩,所以基本不使用。

rem單位:瀏覽器預設的是1em=16px,rem是相對於root元素大小(也就是html),相對固定,移動端基本使用都是rem單位。

【注】量出來的px除以16就可以了,比如量出來的字型是12,除以16 ,也就是0.75rem.

vw單位:即使給html設定100px(純屬方便計算,除以100就好了,例:量出來12,就除以100,就是0.12),從根本來講px還是個固定單位,所以要換成vw,可以根據視口變化進行變化。(更適配於移動端)。

【注】滿屏的時候是100vw,可以當做百分比來計算

postcss-pxtorem:rootvalue就是設定根元素大小,這裡根據750的設計稿來講,為了方便計算設定為32,對應16px

【注】750是物理畫素,實際解析是375px

假如設定根元素為100px

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...