移动端rem适配

• postcss-pxtorem是一款postcss插件，用于将单位 px 转化为 rem
• lib-flexible用于设置rem基准值

1.使用postcss-pxtorem动态设置rem基准值（html标签的字体大小）

安装依赖：

# yarn add amfe-flexible

npm i amfe-flexible

然后在main.js中加载执行该模块：

import 'amfe-flexible' 

在浏览器中切换手机设备尺寸，观察html标签 font-size 的变化 

 2.使用postcss-pxtorem将px 转化为 rem

安装依赖：

# yarn add -D postcss-pxtorem

# -D 是 --save-dev的简写

npm install postcss-pxtorem -D

 然后在项目根目录中创建postcss.config.js文件：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

配置完毕，重新启动服务；

最后测试：

          刷新页面，查看元素样式是否已将 px 转为 rem ~

 结束啦！！！