移动端VW+rem适配

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

先简单粗暴上方案:
一、设置meta
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
二、UI设计稿尺寸
(1)375字体

html{
  font-size:26.67vw
}

(2)750spa

html{
 font-size:13.34vw
}

没错,其实就是(100/设计稿尺寸)*100 =html font-size+vw
三、全部元素在设计稿上的尺寸除以100单位为rem
例:scala

设计稿 375
image.png设计

html
image.pngcode

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

相关文章
相关标签/搜索