移动框架适配使用插件 postcss-pxtrem，postcss-px-to-viewport ，修改webpack

适配方案：

一、 动态设置根元素font-size 、DOM 元素rem

实现方式： 
1、 开发时使用rem
2、 开发时使用px、修改配置文件 使用postcss-pxtorem 将PX 转 rem， 实现适配

步骤：

	  安装：npm install postcss-pxtorem --save-dev

修改：webnpack.config.js

  require('postcss-pxtorem')({
                 rootValue: 10, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
                 propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
                 unitPrecision: 5, //保留rem小数点多少位
                //selectorBlackList: ['.radius'],  // 要忽略的选择器 则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
                 replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
                 mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
                 minPixelValue: 2, //px小于12的不会被转换
    }),

设置根元素下的font-size 、并根据DPR 设置meta 标签的缩放比例

const vpFunc = () => {
	// 获取DPR 并设置缩放比例
        var dpr = window.devicePixelRatio;
        var meta = document.createElement('meta');
        var scale = 1 / dpr;
        const resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize';
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale +
        ', maximum-scale=' + scale + ', minimum-scale=' + scale);
        document.getElementsByTagName('head')[0].appendChild(meta);
        const recalc = function () {
            var deviceWidth  = document.documentElement.clientWidth;
            console.log(deviceWidth,'--deviceWidth')
            document.documentElement.style.fontSize = (deviceWidth / 10) +'px';
        };
        if (!document.addEventListener) return;
        document.addEventListener('DOMContentLoaded', recalc, false);
        window.addEventListener(resizeEvt, recalc, false);
        recalc()
    }

什么是DPR（ 设备像素比）， 为什么根据DPR 设置缩放

DPR:
　　设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
　　dpr，也被成为device pixel ratio，即物理像素与逻辑像素的比，那也就不难理解：iphone6下dpr=2，iphone6+下dpr=3（考虑的是栅格化时的像素，并非真实的物理像素）;

为什么设置对应缩放
    以 dpr = 2 为例，把 4(2x2) 个像素当 1 个像素使用，这样让屏幕看起来更精致，但是元素的大小本身却不会改变

注意点：

 1、行内样式单位无法转义
 2、不需要转义的单位 比如 font-size: 可以写在配置中 也可以将 单位写成大写PX 
 3、在开发时 字体建议不转rem 避免缩放过大 造成字体溢出，而且字体不变 当容器变大时可以展示更多内容
 4、在开发时 需注意 是否所有高度需要转rem  比如头部栏 高度 一般不需要转 直接写PX 即可 避免布局乱
 
	postcss-pxtorem官方文档地址： https://www.npmjs.com/package/postcss-pxtorem

postcss-pxtorem官方文档地址

二 vw 适配方案

优点： 不需要监听屏幕大小 设置根元素的font-size 无需计算

配置：

require('postcss-px-to-viewport')({
	      unitToConvert: "px", // 要转化的单位
	      viewportWidth: 750, // UI设计稿的宽度
	      unitPrecision: 6, // 转换后的精度，即小数点位数
	      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
	      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
	      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
	      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
	      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
	      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
	      replace: true, // 是否转换后直接更换属性值
	      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
	      landscape: false // 是否处理横屏情况
   }),

引入UI 库 进行转换

思路 ： 新建postcss.config.js
下面配置 是next 框架下 引用antd ant-mobile 两个库 后的配置
可以尝试 复制 运行 然后打印file.file 查看结果后根据需求自行配置

module.exports = (file) => {
  // antd index.less 不转
  // antd - mobile  index.m.less  转
  // console.log(designWidth, '----designWidth')
  // console.log(path.join('node_modules', 'vant'), '-位置--')

  if (file.file.basename === 'index.m.less' || file.file.basename === 'antd-mobile.less') {
    return {
      "plugins": {
        autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
        'postcss-px-to-viewport': {
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          // selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          landscape: false, // 是否处理横屏情况
        },
      },
    }
  } else {
    return {
      "plugins": {
        autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      },
    }
  }
}