| 单位 | 说明 | 特点 |
|---|---|---|
| px | （pixel）像素 | 可固定布局或元素大小，缺点无弹性 |
| em | 参考物是父元素的font-size，具有继承的特点 | |
| rem | 相对于根元素html | |
| % | 1、普通定位元素：父元素 ；absolute;的元素是相对于已定位的父元素 ； fixed;的元素是相对于ViewPort（可视窗口） | |
| vw | （view width）视窗宽度的百分比 | 1vw 代表视窗的宽度为 1% |
| vh | (view height)视窗高度的百分比 | 假如高度是1200px的话。那1vh就是12px |
| vmin | 当前 vw 和 vh 中较小的一个值 | |
| vmax | 当前 vw 和 vh 中较大的一个值 |
vw、vh 与 % 百分比的区别
（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、**vh **优势在于能够直接获取高度，而用 **% **在没有设置 **body **高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
#mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin和 vmax是当前较小的 vw和 vh和当前较大的 vw和 vh。这里就可以用到 vmin和 vmax。使得文字大小在横竖屏下保持一致。
浏览器兼容性
vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。这也是为什么之前rem布局一直更流行的原因。
（1）桌面 PC
Chrome：自 26版起就完美支持（2013年2月）
Firefox：自 19版起就完美支持（2013年1月）
Safari：自6.1版起就完美支持（2013年10月）
Opera：自15版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm代替 vmin）
（2）移动设备Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8版起就完美支持（2014年9月）
px
px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
2、em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
3、rem
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
4、%
一般来说就是相对于父元素的，
1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
5、vw
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
6、vh
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
7、vm
css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
兼容性太差 ，现在基本上没人用，我试了一下Chrome就用不了。
参考：https://blog.csdn.net/weixin_42192534/article/details/80289782
https://blog.csdn.net/ZNYSYS520/article/details/76053961
