基于vue项目移动端样式适配，lib-flexible和postcss-px2rem

安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save

npm install postcss-px2rem --save
           

• flexible会为页面根据屏幕自动添加 <meta name=‘viewport’ > 标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
• postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据 HTML标签的font-size值来计算出结果，1rem=html标签的font-size值。

引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'
           

配置postcss-px2rem

在build文件夹中vue-loader.conf.js添加

postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]
           

remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。

OK，是不是很简单！重启项目，两个用于移动端适配的包就这样可以愉快的开始使用了！！！

测试一下，先看一下代码段

.test{
  width: 500px;
  height: 200px;
  background-color: blue;
}
           

再看一下浏览器中

已经从px转换成了rem。哦？如果你的没有变化, 那么你可能需要重启一下项目呐~

这样不仅简单，而且不会影响mint-ui这样的第三方UI框架，UI框架样式不会有变化，例如原来我是用的其他适配方法都会使按钮会变小！等。