移动端适配问题，rem及 px2rem

移动端适配问题

前言—为什么写下这个文章？

最近在做我们项目的pc端，移动端本来已经做完了，用的是% + px的形式去做的适配，看起来挺好的，不过只是看起来而已。。。
这天领导忽然发了条消息说要做适配，说在手机的老人模式下，我们的移动端字体及布局都全部乱了。

项目里已经做了禁止缩放的代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

这里介绍下以前的几种适配做法

使用viewport缩放（也就是我上面的代码）

如果是以320px为基准做的还原视觉稿，那么在适配大于320px的机子时就会使用
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=number />

而里面的number这代表着该机子宽度和320的比例，initial-scale越来越大，页面内容也就被拉伸也越厉害，导致页面内容会变得模糊，这个方法已经被摒弃了。

固定宽度进行留白

这个就牛逼了，都不用做适配了，直接还原视觉稿，多出来的直接留白。不可取；

响应式布局

相信大家也是比较熟悉的，bootstrap就有经典的响应式布局呀，问题是会增加我们的工作量，还有也不能完全解决所有的问题

rem适配（w3c是这么解释的，font size of the root element）

根据html的font-size为基准，em是以父元素的font-size为基准，有兴趣的可以看这个rem - em

由于每一个不同尺寸的手机都有可能有不同的根元素font-size,为了固定你的根元素的font-size，你可以这么做

(function(doc, win) {
  //用原生方法获取用户设置的浏览器的字体大小(兼容ie)
  if(doc.documentElement.currentStyle) {
    var user_webset_font=doc.documentElement.currentStyle['fontSize'];
  }
  else {
    var user_webset_font=getComputedStyle(doc.documentElement,false)['fontSize'];
  }
  //取整后与默认16px的比例系数
  var xs=parseFloat(user_webset_font)/16;
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    clientWidth,
    recalc = function() {
      //设置根字体大小
      var s = (16*16/parseFloat(user_webset_font));
      document.documentElement.style.fontSize = s + 'px';
    };
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

我这里默认的是html的基准为16px，那我在使用的时候，1rem就代表这16px；这样无论在哪个手机，或者老人机模式下我的字体大小怎么都是基于16px来做的，本来我觉得是不是可以直接将html的font-size设置为1px，这样写方便rem的直接使用，可是后面想想，如果我设置成了一，有可能没有设置font-size的文本就有可能直接为1px了。
当然你也可以通过媒体查询去做相应的适配不同宽度机器的html的font-size

但是rem其实也不是全能的，在宽度或者高度不确定的时候也是不知所措的。而且在我们项目中之前全部都是px+%做的，效果也是挺好的。就是老人模式下的font-size加大了才导致出问题。所以结合使用才是正道。
有时间也可以去研究研究vm和vh。我暂时没什么时间去看了，项目时间吃紧。

找到了解决的方法。可是我们项目里面的样式文件实在是有点多。如果一个一个font-size去改的话，那起码是好几天的流水线的活。
于是我就写了一个公用的样式文件。定义了一些font-size的大小，比如：
$size10: 10rem/16
之类的变量，我们用的是sass。然后一个文件一个文件直接全选全改。
可是这样依旧还是有很大的工作量。于是我就想着能不能直接replaceAll。
IDE里面可以直接replaceAll，可是这个正则还是没有办法写成。于是想着能不能用babel配置一个插件在打包编译的时候直接转换，或者是写一个node脚本读写文件。
这两种方式目前我还在探索，下次更新。。。