移動端適配方案有很多種,都各有千秋,這裏我只介紹vw+rem適配方案
先簡單粗暴上方案:
1、設置meta
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
2、UI設計稿尺寸
(1)375
html{
font-size:26.67vw
}
(2)750
html{
font-size:13.34vw
}
沒錯,其實就是(100/設計稿尺寸)*100 =html font-size+vw
3、所有元素在設計稿上的尺寸除以100單位為rem
例:
設計稿 375
html
元素font-size:14px 寫0.14rem,發現計算出來字體在375尺寸下就是非常接近14px