移動端適配

2022-06-07 13:24:11 字數 783 閱讀 6506

核心過程:

1.根字型 = ( 裝置橫向獨立畫素值 * 100 (蘋果6固定)) / 設計稿寬度

2.編寫樣式時:

直接以rem為單位。

值為:設計值 / 根字型

設計稿寬度不變,蘋果6的根字型固定100px,所以當rem不變, 物理畫素變大,換裝置,需要計算根字型。根字型變小

核心過程:

1. 根字型 = 裝置橫向獨立畫素值 / 10

2.編寫樣式時:

直接以rem為單位。

值為:設計值 / (設計稿寬度 / 10)

"en

">"

demo

">

第二種方法,非375設計圖,是750設計圖,和less一起搞

"en

">"

demo

">

less,  750的設計圖

@font: 750/10rem;

*#demo

設計稿

移動端適配

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