# 1、px
px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应，有点麻烦。
# 2、em
em是相对长度单位。相对于当前对象内本文的字体尺寸
- em的值并不是固定的
- em会继承父级元素的字体大小
- 相对于当前对象内本文的字体尺寸，如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px
这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。
即：
html,body {font-size: 62.5%;}
注意：
浏览器可以识别的最小字体也是有偏差的。 如，谷歌可以识别的最小字体大小是12px，小于12px，依然按照12px显示。其他浏览器虽然会好点，但是尽量控制最小的字体在12px。再小的可以通过字体缩放实现，或图片等方式。 考虑浏览器兼容性，可以每次设置字体大小加上line-height，给个固定值，或百分比，控制盒子高度的一致性。
由此得出结论
- 我们可以通过设置一个父级元素如html、body
- font-size,作为整体默认尺寸，通过运行js脚本动态修改font-size实现适配
- 其适配方案依旧是依据像素点来适配
- 需要通过注入脚本实现
document.body.style.fontSize='20px';
2
- 所有子元素的宽度、高度、font-size等尺寸，均继承与父元素，故增加了我们的计算成本
# 3、rem（root em）
rem和em一样也是相对长度单位，但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择
- 只相对于根元素（html）
- 通过修改根元素可成比例的调整页面字体大小
- 其适配方案通过js脚本设置像素点来实现
document.documentElement.style.fontSize='20px'
# 总结：
- 用rem，不用em，尺寸清晰，易于维护
- 由于rem是root em，故其与em兼容性是一致的
- 均是基于像素点适配
# 重点：vw和vh视口（viewport units）单位
vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。所谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个
- vw:1vw 等于视口宽度的1%
- Vh:1vh 等于视口高度的1%
- vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
- vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh
Note: IE9 uses vm instead of vmin. It does not support vmax.
兼容性方面是vw和vh的短板了，使用vw和vh所需求的版本还是较高的
由于使用vw、vh依赖于视图窗口，故当屏幕分辨率变大或者缩小，尺寸会进行相应的放大或者缩小，当页面足够大，或者足够小时，尺寸会变得很大或者很小，从而导致用户体验差，当然谁会用那么大或者那么小的设备呢？大多数情况下，其实可以忽略不计的，如果你是一个最求完美用户体验的人，可通过rem，对根元素设置最大最小值，配合body加上最大宽度和最小宽度
参考：
https://zhuanlan.zhihu.com/p/96721026
https://zhuanlan.zhihu.com/p/36913200