px，em，rem，vw，vh之间的区别

梦在森谷

一，px（像素）：像素是屏幕上显示的最小单位，它是固定的，不随页面缩放而改变大小。在响应式设计中，使用像素单位可能会导致布局在不同屏幕尺寸上显示不一致。
例如：现在在你电脑上一个字为16px，大小正好，可能到比你分辨率要高的电脑上，字体16px大小不变，但是分辨率有变化，导致字体在别的电脑上可能会导致不适配的情况发生
二，em：em是相对长度单位，它是相对于父元素字体大小的倍数。如果父元素的字体大小为16px，1em就等于16px。em单位的缺点是，当嵌套元素多层时，计算起来可能会变得复杂。
例如：这个就很好理解，就是1em就是父元素的一整个字体大小，当然，嵌套的多了容易搞混，尽量不要在嵌套多个元素的时候使用em，个人认为不太好用
三，rem：rem也是相对长度单位，但它是相对于根元素（html元素）字体大小的倍数。这意味着1rem始终等于根元素的字体大小，不受父元素影响。因此，rem更适合用于响应式设计。
例如：这个跟em的区别就是他不是看父元素，而是看根元素，因为不受父元素的影响，所以适用于自适应
四，vw（视窗宽度单位）：vw是相对于视窗宽度的百分比单位，1vw等于视窗宽度的1%。它常用于创建响应式布局，使元素的大小根据视窗宽度自动调整。
例如：1vw就是根据可视窗口的宽度来进行适配自动调整的。一般是用于可视窗口宽度间的适配
五，vh（视窗高度单位）：vh类似于vw，不同之处在于它是相对于视窗高度的百分比单位，1vh等于视窗高度的1%。vh也常用于响应式设计中。
例如：vh跟vw是一样的，但是vh一般是用于可视窗口高度间的适配的
总的来说，rem和em是相对长度单位，而px、vw和vh是绝对或相对绝对长度单位。在网页设计中，选择合适的单位取决于具体的布局需求和设计目标。
原文链接：https://blog.csdn.net/Mxy18851251178/article/details/135435489

来源:https://www.cnblogs.com/lx06/p/18518109
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！