移动端VW+rem适配

移动端适配方案有很多种，都各有千秋，这里我只介绍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，改变屏幕就可以看到尺寸动态改变

  现在来分别解释下这么做的原理

1、meta这样设置是为了保证页面没有缩放且根据设备宽度自适应

2、vw是css3新出的视口单位，1vw就是视口宽度的1%

     我们都知道rem是相对于根元素的，所以我们可以动态的修改html的font-size来实现适配

     （1）100/设计稿尺寸 ：就是计算出1px等于多少vw

     （2）然后将（1）计算的数值再乘以100，相当于100px用多少vw来表示，

              根元素的font-size设置为100px那么相应的子元素就都需要除100才是正常显示值，

              将html font-size设置为100倍，是因为100之间换算比较容易，当然可以是任何数值，

             但需要注意的是浏览器font-size最小值为12px小于的都会被默认置为12px（chrom是11.32），

             所以根元素的字体换算出来不能小于12px

     3、最后，想要让PC也友好的显示可以通过媒体查询直接将html 字体设置为100px 或者200px