移动端适配

使用插件：postcss-px-to-viewport。

可使用npm、yarn安装：npm install -D postcss-px-to-viewport 或 yarn add -D postcss-px-to-viewport 。
在项目的最外层（即配置文件同级目录下）新建.postcssrc.js文件，在.postcssrc.js文件中加入配置语句，.postcssrc.js更新需要重启才会生效，以下为示例

module.exports = {
    plugins: {
        autoprefixer: {}, // 自动添加相应浏览器前缀，样式兼容，如-webkit-，-moz-等
        "postcss-px-to-viewport": {
            unitToConvert: "px", // (String)需要转换的单位，默认为"px"
            viewportWidth: 750, // (Number)设计稿的视口宽度：可为设计稿的宽度，也可按需自行配置（PC）
            unitPrecision: 6, // (Number)单位转换后保留的精度，即小数点位数
            propList: ["*"], // (Array)指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // (String)指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // (String)指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ["demo"], // (Array)需要忽略的CSS选择器，不转为视窗单位，使用原有单位，
            minPixelValue: 1, // (Number)设置最小的转换数值，默认为1，只有大于1的值会被转换
            mediaQuery: true, // (Boolean)媒体查询里的单位是否需要转换单位，默认false
            replace: true, // (Boolean)是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/], // (Array or Regexp)忽略某些文件夹下的文件或特定文件，用正则做目录名匹配
            include: /Ignore.vue/,    //(Array or Regexp)只有匹配到的文件才会被转换，那将只有匹配到的文件才会被转换
            landscape: false, // (Boolean)是否添加根据 landscapeWidth 生成的媒体查询条件
            landscapeUnit: 'vw',    //(String)横屏时使用的单位
            landscapeWidth: 700     //(Number)横屏时使用的视口宽度
        }
    }
};

 也可在配置文件中进行配置 vue.config.js。

const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
  css: {
    // 忽略 CSS order 顺序警告
    extract: { ignoreOrder: true },
    // 适配插件
    loaderOptions: {
      postcss: {
        plugins: [
          pxtoviewport({
            // 配置视窗口尺寸
            viewportWidth: 1700,
            unitPrecision: 5,
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: true,
          }),
        ],
      },
    },
  },
}

使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）
安装： yarn add amfe-flexible 或者 npm i amfe-flexible
然后在 main.js 中加载执行该模块：import ‘amfe-flexible’
最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
使用 postcss-pxtorem 将 px 转为 rem
安装：yarn add -D postcss-pxtorem，npm install postcss-pxtorem -D。（ -D 是 --save-dev 的简写。）
然后在项目根目录中创建 .postcssrc.js 文件。
配置完毕，重新启动服务。 

	module.exports = {
	  plugins: {
	    'postcss-pxtorem': {
	      rootValue: 37.5,
	      propList: ['*']
	    }
	  }
	}