核心過程:
1.根字型 = ( 裝置橫向獨立畫素值 * 100 (蘋果6固定)) / 設計稿寬度
2.編寫樣式時:
直接以rem為單位。
值為:設計值 / 根字型
設計稿寬度不變,蘋果6的根字型固定100px,所以當rem不變, 物理畫素變大,換裝置,需要計算根字型。根字型變小
核心過程:
1. 根字型 = 裝置橫向獨立畫素值 / 10
2.編寫樣式時:
直接以rem為單位。
值為:設計值 / (設計稿寬度 / 10)
"en第二種方法,非375設計圖,是750設計圖,和less一起搞">"
demo
">
"enless, 750的設計圖">"
demo
">
@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...