移动端布局自适应的方法

一、lib-flexible

flexible毫无疑问在移动端自适应上还是很方便的，具体用法如下

1.安装flexible.js 

npm install lib-flexible --save

2.入口文件main.js引入

import 'lib-flexible'

3.安装px2rem

npm install px2rem-loader --save

4.配置px2rem

找到 build/utils.js文件，在utils.js中添加

ok,现在你只需要按照设计稿上的px直接写布局，就会发现在各平台布局完全一致了(配置完以后不要忘记重启项目)

二、手动计算分辨率

rem是css的单位，rem的自适应布局是通过设置html标签下的font-size的大小来实现的，其实在使用flexible的时候你就会发现每次切换分辨率，每次都会给html设置不同的font-size，所以从原理上来说是一样的。

1.设置html下font-size:62.5% 

因为100%是16px,所以设置为62.5%的话，设计稿的10px就可以直接写1rem，不过可以给你的ide装一个css转rem的插件(vscode-cssrem)，配置好转化比例，写css的时候就不用自己去计算了

2.计算分辨率

按照步骤一的写法只能保证在设计稿上的分辨率是完全可以的，但是肯定是需要在不同分辨率显示一样的，所以还需要这段代码

 

var fun = function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
      //可以根据实际需要修改
      docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

或者

!function () {
      var htmlEl = document.getElementsByTagName('html')[0];
      var fitPage = function () {
        var w = htmlEl.getBoundingClientRect().width;
        w = Math.round(w);
        w = w > 750 ? 750 : w;
        var newW = w / 750 * 100;
        htmlEl.style.fontSize = newW + 'px';
      }
      fitPage();

      var t;
      var func = function () {
        clearTimeout(t);
        t = setTimeout(fitPage, 25);
      }
      window.addEventListener('resize', func);
    }();

当然大多数情况下，分辨率相差不多的情况下也不需要js计算1rem到底是多少px