Vue CLI 3与移动端适配

青青子衿，悠悠我心

一、amfe-flexible

1.首先把安装amfe-flexible，这里使用npm install

nnpm i  amfe-flexible -S

2.在项目入口文件main.js 中引入amfe-flexible

import 'amfe-flexible'

3.在根目录的index.html 的头部加入手机端适配的meta代码

http://www.cnblogs.com/lml2017/p/9953429.html

PostCSS介绍

Vue CLI 内部使用了 PostCSS，默认开启了autoprefixer

配置方法
通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。
1.在package.json配置

 "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "Android >= 4.0",
          "iOS >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  },

2.也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

//vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            browsers: ['Android >= 4.0', 'iOS >= 7']
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
          })
        ]
      }
    }
  }
}

配置autoprefixer (浏览器前缀规则)

https://segmentfault.com/a/1190000008030425

1. 使用 package.json 的 browserslist 字段
2. postcss.config.js

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

配置 postcss-pxtorem

postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。代码中写px单位，浏览器中从px转换成了rem

npm install --save postcss-pxtorem

温馨提示： remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。

那为什么你在这里写成了37.5呢？？？那我们后面专门来讲！
之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。

既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。