1.postcss-pxtorem

引入rem转换–安装postcss-pxtorem 这个是将px转为rem----注意直接可以在项目设置px，这个插件自动会编译的rem自动识别，你在项目中使用px就可以了，不用在vscode再次使用rem,这样子写起来更快了（报错就下载npm install postcss-pxtorem@5.1.1）

npm install postcss-pxtorem

在package.json项目配置里设置postcss

"postcss": {
	"plugins": {
		"autoprefixer": {
			"overrideBrowserslist": [
				"Android 4.1",
				"iOS 7.1",
				"Chrome > 31",
				"ff > 31",
				"ie >= 8"，
                "last 10 versions", // 所有主流浏览器最近10版本用
			]
		},
		"postcss-pxtorem": {
			rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      		propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      		unitPrecision: 5, //保留rem小数点多少位
      		selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      		replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
     		mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      		minPixelValue: 12, //px小于12的不会被转换
		}
	}
}

2.amfe-flexible

npm install amfe-flexible

在main.js文件中引入amfe-flexible/index.js

import 'amfe-flexible/index.js'

3.设置meta标签

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

4.媒体查询模板

  @media screen and (max-width: 768px) {
    .el-dialog {
      width: 375px;
    }
    .el-table {
      margin-top: 1rem;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .el-dialog {
      width: 500px;
    }
    .el-table {
      margin-top: 0.8rem;
    }
  }
  @media screen and (min-width: 992px) and (max-width: 1200px) {
    .el-dialog {
      width: 50%;
    }
    .el-table {
      margin-top: 0.6rem;
    }
  }

5.postcss-px-to-viewport兼容vant

在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生：

const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

没错，在那个移动端UI稿尺寸为750*1334满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px*40px，那么开发者对应的写成1.2rem*0.4rem就可以了

这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的，有16的，很多已经严重超出口算力所能及的范畴了。所以后来诞生的px-to-rem或者px2rem就是为了解决这个问题

这种方式比写的1、2、3和常规写js一起配置的方便的多

1.npm 下载postcss-px-to-viewport

npm install postcss-px-to-viewport

2.在根目录创建 postcss.config.js，添加配置

const path = require("path");

module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(path.join("node_modules", "vant")) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要转化的单位
        // viewportWidth: 750, // UI设计稿的宽度
        viewportWidth: designWidth, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ["*", "!letter-spacing"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false, // 是否处理横屏情况
      },
    },
  };
};

3.重启项目，使配置生效

4.测试代码

<template>
  <div class="home">
    <div class="test-viewport">测试转换</div>
    <div class="wrap-spacing">不被转黄</div>
  </div>
</template>

<style lang="less" scoped>
.test-viewport {
  width: 750px;
  height: 100px;
  font-size: 40px;
  letter-spacing: 20px;	//配置 propList 使 letter-spacing 不被转换
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}
.wrap-spacing {	//配置 selectorBlackList 使 wrap 开头的不被转换
  width: 750px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #42b983;
}
</style>

5.兼容第三方库

当然，当我们引入一些第三方库的时候，比如vant，上面配置的exclude去掉，表示全部内容进行vw转换，会遇到这样的问题：

像这个TabBar，变得非常的小，被压扁了。

其实vant官网也是给出了关于viewport的适配方案，在github找一个名为vant-demo的项目，可以看到其配置如下，github链接 (opens new window)：

很尴尬，vant团队的是根据375px的设计稿去做的，理想视口宽度为375px。

那么，我们是否也要叫UI重新出一版375px的设计稿？

或者，我们在书写的过程心算一下，所有标注的尺寸都除以2？

让我们回到webpack本身，重新看一下这份.postcssrc.js文件，它除了暴露一个对象，也可以暴露一个函数，无论暴露什么，在webpack运行时，都会被我们配置的海量文件读取并执行。

暴露函数有一个好处，可以拿到webpack运行的当前执行文件的信息。

那么我们可以有这样一个思路：如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。

6.添加文件配置：

const designWidth = webpack.resourcePath.includes(path.join("node_modules", "vant")) ? 375 : 750;

注意：这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统， 在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant

6.css自动添加前缀

注意：版本别太高，会报错，最好8.0.0

npm i postcss-loader autoprefixer@8.0.0

在 main.js 的 browserslist 配置

"browserslist": [
    "> 1%",
    "last 3 versions",
    "not ie <= 8",
    "chrome >= 14",
    "safari >= 3",
    "ios >= 8",
    "android >= 4.0"
 ]