移动端页面适配之 vw

第一步

先用vue-cli快速构建出一个项目，然后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；

第二步

我用的vue-cli3,所以在 vue.config.js 文件的 exports 代码块中添加以下代码

module.exports = {
	 "plugins": { 
	 	"postcss-import": {}, 
	 	"postcss-url": {}, 
	 	"postcss-aspect-ratio-mini": {}, 
		 "postcss-write-svg": { utf8: false },
	 	"postcss-cssnext": {}, 
	 	"postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, 
	 	"postcss-viewport-units": {}
	 }
}

viewportWidth是你设计稿的大小750，然后unitPrecision是vw值保留的小数点个数；

rem 兼容可查看我上篇博客：移动端rem适配（vue&H5）-实践记录

---

参考资料：https://www.jianshu.com/p/5b54be9dc063