CSS移动端的适配

第一步设置页面视口：

<meta name="viewport" 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

第二步配置rem单位：

1. 安装postcss-pxtorem，自动将 px 转换成 rem 单位的插件

cnpm install postcss-pxtorem@5.1.1 -S

2. 安装amfe-flexible，自动检测当前设备屏幕宽度serveWidth，设置html里面的font-szie为serveWidth/10

cnpm install amfe-flexible -S

3. 文件配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ rootValue: 37.5 }),
        ],
      },
    },
  },
};

// main.js
import 'amfe-flexible';