px
不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)
百分比
子元素的高宽 padding margin参考父元素计算
rem
子元素的高宽 padding margin参考根元素（html） 计算
使用的库：
postcss-pxtorem
amfe-flexible
但是现在官网推荐不使用，个人总结主要有以下缺点
（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
（2）使用iframe引用也会出现问题。
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。
即大屏的出现是为了看的更多的。而rem布局是为了看得又大又清楚。
（4）amfe-flexible基于的lib-flexible不维护了
vw和vh
vw 和 vh 永远都是以视口作为参考
- vw(Viewport's width)：1vw等于视觉视口的1%
- vh(Viewport's height) :1vh 为视觉视口高度的1%
- vmin : vw 和 vh 中的较小值
- vmax : 选取 vw 和 vh 中的最大值
postcss-px-to-viewport
.postcssrc.js文件对新安装的PostCSS插件进行配置：
module.exports = {
"plugins": {
"postcss-import": {},
// postcss-import主要功有是解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。
"postcss-url": {},
// 该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。
"autoprefixer": {},
//autoprefixer插件是用来自动处理浏览器前缀的一个插件。
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
}
}
//<div class="box ignore"></div> 不进行转换
