移动端页面完美适配解决方案（现阶段）

最近在写一些移动端的页面，总会遇到一些适配问题，以前呢也不知道为什么，总是习惯用rem来做单位，可是总有问题，写起来相当难受，于是我坐不住了，一定要去看看有没有更好的方法。
然后就有了已下心得。
先吐槽一句，rem不知道是谁带起来的，坑了好多人。
想必做前端的肯定都知道vw，vh这样的相对单位吧。它是相对于屏幕的宽度来的，具体可以看看这篇文章
接下来就是如何写项目配置，首先安装postcss-px-to-viewport这个插件，然后在项目根目录创建（如果有就不用）.postcssrc.js文件
具体配置如下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      // viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: [
        '.ignore',
        '.weui-dialog',
        '.swiper',
        '.weui-toast',
        '.weui-loading',
        '.weui-icon_toast'
      ], // 这是需要忽略转换的css名称，为了搭配一些第三方ui库使用
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}

viewportWidth: 750这个配置指的是ui给你的移动端页面是750px宽，这样对应的话，你的css（less）文件里写单位还是写原来的px就行，比如蓝湖上某张图片的宽高是75px*75px，那么你在css里也直接写就ok。

.img{
  width: 75px;
  height: 75px;
}
// 最后会编译为
.img{
  width: 10vw;
  height: 10vw;
}

书写上和与ui的交流上完全不用人为手动转化，是不是有种恍然大悟的感觉，写过小程序就能明白，小程序的rpx单位其实也一样的原理。
最后想说，目前来看，我觉得flex布局+vw是解决移动端适配最完美的解决方案。