vue移动端自适应布局

根据postcss-pxtorem来实现自动渲染px至rem，不用再进行手动计算

一、实现方式

• postcss-pxtorem：将px转换为rem；
• amfe-flexible：为html，body添加font-size，在窗口调整时重新设置font-size

二、安装与使用

• 安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

• 使用
  1、在main.js中引入

import "amfe-flexible/index.js"; //适配

2、创建postcss.config.js配置文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
      ],
    },
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
      selectorBlackList: [/^\.el-/],//过滤掉element-ui组件；文件样式大写PX
    },
  },
};

以上操作即可完成移动端适配问题