移動端適配

2021-10-04 21:34:27 字數 530 閱讀 2674

無法對1px邊框的問題進行處理(裝置畫素比的問題)

採用rem, %, px單位進行適配

使用js動態的計算當前的rem單位取值。

即 1 rem = ? px

假如設計稿的寬度為 750px

元素測量得到的寬度為 100px

那麼在視口寬度為 375px下

元素的寬度就變為 50 px

元素寬度從 px 單位轉為 rem

需要先知道1 rem = ? px

這裡需要乙個係數,方便我們計算在當前螢幕下

1 rem = ? px

其實 1 rem = ? px 取決於我們自己,因為係數也是我們自己人為手動定製的。所以該係數只要方便我們計算即可

那麼得到公式(轉換關係)

1 rem = 視口寬度 / radio

因為該設計為750 px

我們把1 rem = 40px

即得到radio 為 18.75

移動端適配

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 裝置寬度 設計搞寬...

移動端適配

首先在head標籤裡加上meta而後再將寫好的指令碼引入即可 將下面 寫在乙個檔案中,在head中引用 function e,t function d var i t.documentelement,o e.devicepixelratio 1 if n d e.addeventlistener r...