移动端适配

一 利用lib-flexible加postcss-pxtorem

1. 首先在项目中引入lib-flexible

npm install lib-flexible -s

// mian.js 全局引入
import 'lib-flexible/flexible'

此时会使浏览器自动添加font-size属性

2. 引入postcss-pxtorem

接下来我们写样式的时候就都要用 rem 做单位，想想还是有点麻烦，有没有什么好办法还是正常写 px 单位，但是编译代码的时候能转化成 rem。 postcss-pxtorem 帮我们解决了这个棘手的问题，下面老规矩，先安装它：

npm install postcss-pxtorem -D 

注意: 这里可能会导致报错，是因为版本太高,.可以改为npm install postcss-pxtorem@5.1.1 -D

3. 配置.postcssrc.js

在项目根目录下新建 .postcssrc.js 配置文件，配置代码如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7'] /
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

这里也可能因为版本太高引起报错

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

可以把 .postcssrc.js修改为：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

之所以设置rootValue是因为写项目时一帮都是以iphone6/7/8为基准，而其width为375px,除以10得到37.5