最近在写一些移动端的页面，总会遇到一些适配问题，以前呢也不知道为什么，总是习惯用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是解决移动端适配最完美的解决方案。
