vue+ vant + lib-flexible +postcs

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;