移动端VW适配

JoyZ

移动端适配方案有很多种,都各有千秋,这里我只介绍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
image.png

html
image.png

元素font-size:14px 写0.14rem,发现计算出来字体在375尺寸下就是非常接近14px
image.png

阅读 272
14 声望
1 粉丝
0 条评论
14 声望
1 粉丝
宣传栏