移动端rem适配

1、em是根据父元素的字体大小来设置
   rem是根据根元素html的字体大小来设置

2、浏览器根元素默认的字体大小是 16px 
    如果要设置12px的字体，转换成rem 则是：font-size:0.75rem;(12/16=0.75)

3、通过设置html的不同的基准值来达到适配的效果，可以使用postcss-px2rem  lib-flexible来适配
计算公式    

@function px2rem($px){
   $rem : 37.5px;
   @return ($px/$rem) + rem;
}

4、动态设置html的font-size
    A、利用css的media query来设置

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{
          font-size: 37.5px;
      }
}

    B、利用javascript来动态设置

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

5、rem适配进阶

A、视觉稿 一般是iphone6 750X1334 尺寸 双倍大小，在使用rem之前，会将标注/2，这是因为iphone6属于高清屏设备像素比(device pixel ratio)dpr比较大。
B、一般手机的dpr是1，iphone这种高清屏是2，可以通过js的window.devicePixelRatio获取到当前设备的dpr。
C、根据dpr，可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');


@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

// 项目中按1080宽的设计图输出，设置initial-scale的比例
export function setMeta(isDefault) {
  const _meta = document.querySelector("meta[name='viewport']");
  if (isDefault) {
    _meta.setAttribute('content', 'width=device-width, initial-scale=1.0');
  } else {
    const _vwidth = window.screen.width;
    const _scale = _vwidth / 1080;
    _meta.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + _scale);
  }
}