H5移动端适配总结

近段时间以来在做微信公众号的H5开发，然而安装UI设计人员给出的尺寸在不同的移动端设备上的表现并不一致，并且在界面适配方面本以为只要在开发过程中尽量使用百分比和flex布局等就可以实现，然而在不同分辨率的手机上看到的效果并不让人满意，布局虽然没有很大的变化，但是字体和图片都出现了失真或者变形的情况。

因此通过查阅资料，了解到两种屏幕适配的方案：1.通过对界面进行等比例缩放；2.使用rem单位进行界面的适配。

1、第一种方式属于有一种暴力适配，即通过计算设计人员给出的设计稿的尺寸和设备的真实尺寸，将这个比值作为缩放比赋值飞meta标签，但是这种情况下往往会出现字体和图片的失真或者锐化。

实现代码大致如下：

 /*以下代码通过缩放方式实现为不同屏幕下适配设计稿尺寸js（不推荐）*/
     function flex(designWidth){
       let phoneScale = parseInt(window.screen.width) / designWidth;
       document.write('');
     };

2、第二种方式是通过rem这个新的单位进行适配。要了解这种方式我们必须了解rem这个单位是什么意思，实际上每rem就是界面根元素上设置的字体大小。

比如：我们设置html标签的样式为

html:{
  font-sise:20px;
}

那么1rem即为20px。

理解了rem的意义之后我们再谈界面的适配，我们要实现对不同尺寸的界面的适配，那么我们只要根据不同尺寸的界面给界面的根元素设置不同的字体大小即可，这样rem这个我们要使用的单位代表的尺寸就会随着界面的尺寸的改变而改变了，我们就可以按照设计稿给出的尺寸来写我们的前端样式了。

这个适配的代码主要分为以下几步：

1、设置基准字体大小

2、设置界面尺寸变化事件的监听，刷新基准字体大小

3、在布局中使用rem单位编写界面样式

代码如下：

  /*以下代码为不同屏幕下字体通过rem适配设计稿的方案
    @designWidth 设计稿的全屏宽度
    @maxWidth  适配的最大宽度
  */
    (function(designWidth, maxWidth) {
       var doc = document,
        win = window;
      var docEl = doc.documentElement;
      var remStyle = document.createElement("style");
      //获取基准字体大小
      function refreshRem() {
        // var width = parseInt(window.screen.width); // uc有bug
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
          maxWidth = 750;
        };
        if (width > maxWidth) {
          width = maxWidth;
        }
        var rem = width/designWidth*100;
        //得到的rem基准字体大小，这里乘以100是为了适配有的浏览器不识别小数，会导致设置字体无效。
        //设置根元素html的字体大小为基准字体大小，在css中每rem就是这个值的大小。
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
      }
      refreshRem();
      if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
      } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
      }
     /* 以下为在不同的时机重新计算rem*/
      win.addEventListener("resize", function() {
        // clearTimeout(tid); //防止执行两次
        // tid = setTimeout(refreshRem, 50);
         refreshRem()
      }, false);

      win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
          refreshRem()
          // clearTimeout(tid);
          // tid = setTimeout(refreshRem,50);
        }
      }, false);
    })(750, 750);
 

执行上面的代码之后，我们只需要将设计稿上的尺寸除以100，并将单位换成rem即可；

比如：

设计稿给出 

div:{
  width:100px;
  height:100px;
}

那么我们需要写成：

div:{
  width:1rem;
  height:1rem;
}

如有错误，还望指正，谢谢。