你媳妇都不告诉你的移动端适配方案

移动端适配（安装flexble和postcss）

1.1 安装flexble

  yarn add lib-flexlble -save 

1.2 引入main.js

 // 移动端适配
 import 'lib-flexible'

1.3在lib-flexible将540修改成width

 ​
 ;(function(win, lib) {
     var doc = win.document;
     var docEl = doc.documentElement;
     var metaEl = doc.querySelector('meta[name="viewport"]');
     var flexibleEl = doc.querySelector('meta[name="flexible"]');
     var dpr = 0;
     var scale = 0;
     var tid;
     var flexible = lib.flexible || (lib.flexible = {});
 ​
     if (metaEl) {
         console.warn('将根据已有的meta标签来设置缩放比例');
         var match = metaEl.getAttribute('content').match(/initial-scale=([\d.]+)/);
         if (match) {
             scale = parseFloat(match[1]);
             dpr = parseInt(1 / scale);
         }
     } else if (flexibleEl) {
         var content = flexibleEl.getAttribute('content');
         if (content) {
             var initialDpr = content.match(/initial-dpr=([\d.]+)/);
             var maximumDpr = content.match(/maximum-dpr=([\d.]+)/);
             if (initialDpr) {
                 dpr = parseFloat(initialDpr[1]);
                 scale = parseFloat((1 / dpr).toFixed(2));
             }
             if (maximumDpr) {
                 dpr = parseFloat(maximumDpr[1]);
                 scale = parseFloat((1 / dpr).toFixed(2));
             }
         }
     }
 ​
     if (!dpr && !scale) {
         var isAndroid = win.navigator.appVersion.match(/android/gi);
         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
         var devicePixelRatio = win.devicePixelRatio;
         if (isIPhone) {
             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                 dpr = 3;
             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                 dpr = 2;
             } else {
                 dpr = 1;
             }
         } else {
             // 其他设备下，仍旧使用1倍的方案
             dpr = 1;
         }
         scale = 1 / dpr;
     }
 ​
     docEl.setAttribute('data-dpr', dpr);
     if (!metaEl) {
         metaEl = doc.createElement('meta');
         metaEl.setAttribute('name', 'viewport');
         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
         if (docEl.firstElementChild) {
             docEl.firstElementChild.appendChild(metaEl);
         } else {
             var wrap = doc.createElement('div');
             wrap.appendChild(metaEl);
             doc.write(wrap.innerHTML);
         }
     }
 ​
     function refreshRem(){
         var width = docEl.getBoundingClientRect().width;
         if (width / dpr > width) { //将这里的540修改成width
             width = width * dpr; //将这里的540修改成width
         }
         var rem = width / 10;
         docEl.style.fontSize = rem + 'px';
         flexible.rem = win.rem = rem;
     }
 ​
     win.addEventListener('resize', function() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 300);
     }, false);
     win.addEventListener('pageshow', function(e) {
         if (e.persisted) {
             clearTimeout(tid);
             tid = setTimeout(refreshRem, 300);
         }
     }, false);
 ​
     if (doc.readyState === 'complete') {
         doc.body.style.fontSize = 12 * dpr + 'px';
     } else {
         doc.addEventListener('DOMContentLoaded', function(e) {
             doc.body.style.fontSize = 12 * dpr + 'px';
         }, false);
     }
 ​
 ​
     refreshRem();
 ​
     flexible.dpr = win.dpr = dpr;
     flexible.refreshRem = refreshRem;
     flexible.rem2px = function(d) {
         var val = parseFloat(d) * this.rem;
         if (typeof d === 'string' && d.match(/rem$/)) {
             val += 'px';
         }
         return val;
     }
     flexible.px2rem = function(d) {
         var val = parseFloat(d) / this.rem;
         if (typeof d === 'string' && d.match(/px$/)) {
             val += 'rem';
         }
         return val;
     }
 ​
 })(window, window['lib'] || (window['lib'] = {}));
 ​

2.1 安装postcss

  yarn add postcss-pxtorem@5.1.1  

2.2 配置postcss在跟目录中创建postcss.config.js

 const pxtorem = require('postcss-pxtorem')
 const autoprefixer = require('autoprefixer')
 module.exports = ({file})=>{
     let rootValue
     if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
         rootValue = 16
     } else {
         rootValue = 37.5
     }
     return {
         plugins: {
             // 兼容浏览器，添加前缀
             autoprefixer: {
                 overrideBrowserslist: [
                     "Android 4.1",
                     "iOS 7.1",
                     "Chrome > 31",
                     "ff > 31",
                     "ie >= 8",
                     "last 10 versions", // 所有主流浏览器最近10版本用
                 ],
                 grid: true,
             },
             "postcss-pxtorem": {
                 rootValue: rootValue, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
                 propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
                 unitPrecision: 5, //保留rem小数点多少位
                 //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
                 replace: true,
                 mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
                 minPixelValue: 12, //px小于12的不会被转换
             },
         },
     }
 }