1、1px
相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的，一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素，后者则是高度为1024个像素。
2、1em
em 就是相对于自身字体 fontSize 的大小，如果自身指定 fontSize = 20px，父元素 fontSize = 30px，那么 1em = 20px；如果自身没有指定，则是继承来自于父元素的 fontSize，1em = 30px。
3、1rem
rem 是全部的长度都相对于根元素 <html> fontSize 的大小，如果 <html> 的 fontSize = 20px，那么 1rem = 20px。
rem的计算方法：
假如设计图是按 640px 来设计的，那么我把设计图分成 10份（随你自己分），也就是 640px = 10rem，那么就是 1rem = 64px， 在根元素 <html> 上设置的 font-size 实际就是给网页的一个标准，它的px是多少，那么子级的 1rem 就等于多少。那么在 640px的屏幕下，根元素 <html > 的 font-size 就可以计算为 640/10，但是屏幕是不指定大小的，如果屏幕缩小的，那么根元素的值也要按百分比来缩小，如：屏幕如果缩到了一半 320，（320/640）*（640/10）（屏幕宽度/设计图） *（设计图/设计图的总分成）。
4、1vw / 1vh
相当于屏幕宽度 / 高度的 1%，不过，处理宽度的时候 % 单位更合适，处理高度的话 vh 单位更好。
————————————————
版权声明：本文为CSDN博主「Nassua」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_37557930/article/details/116241005
