移动端开发布局自适应宽度兼容问题的个人整理

以下内容均以vue项目为基础，本人只会vue…
一、最开始使用的移动端兼容方式，是用设备宽度除以7.5得到值用来设置根html字体大小，因为我们设计稿都是标准的750宽度，所以基本跟字体即是100px，然后编写单位时，只需要使用对应的 100px = 1rem的方式去写。核心基本就是这样

const w = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = w/ 7.5 + 'px';

二、lib-flexible+postcss-pxtorem 插件。后来在写一个项目的时候，就使用了这个插件+vant组件，但是由于vant组件的设计稿是以375的写的，导致我写宽度的时候每次需要把项目设计稿的单位都要在心里默算 除个2，虽然不算很麻烦，但是其实也挺烦人的。
在 .postcssrc.js 中的配置如下

module.exports = {
  plugins: {
    //...
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

三、最近也是感觉当前最好用的适配方式。postcss-px-to-viewport 插件，由于现在对viewport的支持度提升，这种方式无疑成为了最好的选择。毕竟前面的方式都是用字体单位来布局，这种方式总归是不太合适的。
上面的方案都是将px通过手动或自动的方式转换成对应rem单位。而这个方案则是将px转换成设备的vw、vh单位。（不会吧，不会吧，都0202年了，不会还有人不知道 100vw = document.documentElement.clientWidth 吧？）
所以在此也强烈建议各位使用这套方案
安装：

npm i postcss-px-to-viewport -D

在 .postcssrc.js 中的配置如下：

module.exports = ({ file }) => {
  const designWidth = file.dirname.indexOf('vant') > -1 ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px",  // 要转化的单位
        viewportWidth: designWidth,  // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ["*"],  // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw",  // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名
        minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换,某些设备可能会无法显示小于1px的边框线
        mediaQuery: true,// 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false// 是否处理横屏情况
      }
    }
  }
}

插件中文文档传送门地址
因为我依然还是使用的vant组件（依然觉得vant香~~~）