提问列表 > 查看问题
CSS中vw vh rem的关系及作用
提问者: tong
•
提问时间: 2024-04-29 11:24:06
CSS中vw vh rem的关系及作用——转载
vw、vh和rem都是CSS中的长度单位，它们分别相对于不同的基准值进行计算。
vw（Viewport Width）：基于视口宽度的相对单位，1vw等于视口宽度的1%。因此，vw可以用来指定元素相对于视口宽度的大小。
vh（Viewport Height）：基于视口高度的相对单位，1vh等于视口高度的1%。因此，vh可以用来指定元素相对于视口高度的大小。
rem（Root EM）：相对于根元素（即<html>元素）字体大小的长度单位，1rem等于根元素字体大小的1倍。因此，rem可以用来指定元素相对于根元素字体大小的大小。
可以看出，vw和vh与视口大小相关，而rem与根元素字体大小有关。它们之间的转换关系如下：
在视口宽度为w的情况下，1vw等于w/100像素；在根元素字体大小为f的情况下，1rem等于f像素。因此，可以通过下列公式将vw/vh转换为rem：
1vw = w / 100px = (w / 100px) / (f / 1rem) rem = w / (100 * f) rem
1vh = h / 100px = (h / 100px) / (f / 1rem) rem = h / (100 * f) rem
例如，如果视口宽度为750px，根元素字体大小为16px，则1vw等于7.5px，1vh等于4.8px，1rem等于16px。这样就可以通过vw、vh和rem之间的转换关系，灵活地根据不同的设计需要来选择使用合适的长度单位。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/conquer_galaxy/article/details/130043326
目前尚无回复