vue+ vant + lib-flexible +postcss-pxtorem 实现移动端页面自适应
版本：vue cli2脚手架
lib-flexible
1.安装
npm install amfe-flexible --save
2.引入
main.js中：
import 'amfe-flexible'
index.html中：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
==验证==：切换不同的手机尺寸看控制台html的字体会不会发生变化
postcss-pxtorem
1.安装
npm install postcss-pxtorem --save-dev
==踩坑1：==
直接采取上述命令可能会报错 说vant/lib/...有问题 其实并不是vant的错 搜了资料之后发现可能是该依赖包的版本有问题 安装了指定的5.0版本之后就好了
npm install postcss-pxtorem@5.0.0 -D
==踩坑2：==
不知何原因 安装此依赖包之后，对body设置font-size字体大小无效
解决：
body {
background: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
*{
font-size:16px;
font-family: Arial;
}
2.修改.postcssrc.js（如果没有此文件的话在根路径下创建）
module.exports = {
// "plugins": {
// "postcss-import": {},
// "postcss-url": {},
// // to edit target browsers: use "browserslist" field in package.json
// "autoprefixer": {}
// }
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
//设计稿是750的 按理说应该是75 但是引用的vant库尺寸是以375px为标准的
// 这样写样式的时候只需要把设计稿/2写px即可
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750
但是 Vant 建议设置为 37.5，为什么呢？
因为 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。
以上那样做其实也没有问题，但是我们可以这样做：
- 如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
- 如果是我们的样式，就按照 75 的 rootValue 来转换
通过查阅文档我们可以看到 rootValue 支持两种参数类型：
- 数字：固定值
- 函数：动态计算返回
- postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
- 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
所以我们修改配置如下：
'postcss-pxtorem': {
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*']
// exclude 这个属性可以配置不需要转换的资源 直接写文件名就行，不需要后缀
// exclude: 'github-markdown'
}
以上两种方案都行 看自己喜欢哪种了
3.注意事项：
1.如果部分设计样式不想转换为rem，可以将 px 改为 ==PX== ，就不会对该数值进行转换了，但是这一点在 calc 计算属性中是 不生效的，开发模式下没有问题，但是打包时会出现编译错误（截至postcss-pxtorem 4.0.1版本哈，后续也许作者会修复这个问题），这个时候需要配合 selectorBlackList 来设置一个class来取消px的转换。
2.==该插件不能转换行内样式中的 px==，例如 :
<div style="width: 200px;"></div>
不会被转换成rem
==一般border不需要转换成rem==
border:1PX solid red;
