总结一下vue移动端适配方案

方案一：amfe-flexible+px2rem-loader

amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不同终端
px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了
注意：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小

安装 + 配置
1. 安装amfe-flexible和px2rem-loader

npm  install -s amfe-flexible
npm i px2rem-loader --save -dev

2. 配置amfe-flexible

// 入口文件main.js中引入
import 'amfe-flexible/index.js'
// 在index.html中修改meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

amfe-flexible：
给元素动态改写font-size的值，
设置1rem = viewWidth / 10，
设置页面刷新时重置rem，
支持0.5px。

3. 配置px2rem-loader

// build/utils.js
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 //默认换算为1rem为75px，可根据你的原型图修改
    }
  }
// 在generateLoaders方法中添加px2remLoader
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

4. 展示效果

iPhoneX（屏幕宽度为375px）

iPhone6/7/8 plus（屏幕宽度为375px）

iPad（屏幕宽度为768px）

方案二：vw、vh适配方案

vw、vh工作原理

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份；

vw(Viewport’s width)： 1vw等于视觉视口的 1%
vh(Viewport’s height) : 1vh 为视觉视口高度的 1%
如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。

1.安装依赖

npm install postcss-px-to-viewport --save-dev

2.修改postcss.config.js 或者 .postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,     // 允许在媒体查询中转换`px`
      exclude: [/node_modules/] // 设置忽略文件，用正则做目录名匹配
    }
  }
}

引用vant后发现组件变得很小，被压扁了一半，这是因为vant团队是根据375px的设计稿去做的。

适配方法：修改postcss.config.js配置文件；

const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

或在package.json同级下新建文件vue.config.js,在vue.config.js中配置如下：

module.exports={
    css: {
        extract: false,//false表示开发环境,true表示生成环境
        sourceMap: false,
        loaderOptions: {
          postcss: {
            plugins: [
              require("postcss-px-to-viewport")({
                unitToConvert: "px",    // 需要转换的单位，默认为"px"
                viewportWidth: 1920,   // 视窗的宽度，对应pc设计稿的宽度，一般是1920
                viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
                unitPrecision: 3,        // 单位转换后保留的精度
                propList: [        // 能转化为vw的属性列表
                  "*"
                ],
                viewportUnit: "vw",        // 希望使用的视口单位
                fontViewportUnit: "vw",        // 字体使用的视口单位
                selectorBlackList: [],    // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
                minPixelValue: 1,        // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
                mediaQuery: false,        // 媒体查询里的单位是否需要转换单位
                replace: true,        // 是否直接更换属性值，而不添加备用属性
                exclude: /(\/|\\)(node_modules)(\/|\\)/,        // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
              })
            ]
          }
        }
      }    
}

方案三：rem + vw +vh（可以结合方案一和方案二）

原文：1.https://www.jianshu.com/p/950db8c1002c
2.https://www.jianshu.com/p/87d43d241501