移动端VW适配

移动端适配方案有很多种,都各有千秋,这里我只介绍vw+rem适配方案

先简单粗暴上方案:
1、设置meta

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

你可能感兴趣的:(移动端适配,css,viewport)