CSS中vw vh rem的关系及作用

最新推荐文章于 2025-05-14 13:23:59 发布

原创最新推荐文章于 2025-05-14 13:23:59 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了CSS中的vw、vh和rem单位，它们分别基于视口宽度、高度和根元素字体大小。通过vw/vh和rem的转换关系，可以实现元素尺寸的自适应缩放，以适应不同屏幕尺寸，提供更好的用户体验。示例展示了如何利用calc()函数根据浏览器宽度动态调整根元素字体大小，从而影响使用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：

例如，如果视口宽度为750px，根元素字体大小为16px，则1vw等于7.5px，1vh等于4.8px，1rem等于16px。这样就可以通过vw、vh和rem之间的转换关系，灵活地根据不同的设计需要来选择使用合适的长度单位。

会了vw也就会了vh，因此再举个详细一点的例子：

对于以下的css代码

html {
    font-size: calc(100vw/750);
}

假设我们有一个设计稿，宽度为750px，在这个设计稿中，某一段文字的字号为16px。现在我们希望这个字号可以随着浏览器宽度的变化而自适应缩放，以达到最佳的阅读体验。

为了实现这个自适应缩放的效果，我们可以将根元素（即<html>元素）的字体大小设置成屏幕宽度的一定比例。具体来说，可以将根元素字体大小设置为：

font-size: calc(100vw/750);

其中，calc()函数用来计算数学表达式。在这里，表达式100vw/750表示将当前视口宽度除以设计稿宽度750，得到一个比例值，然后将该比例值作为根元素的字号百分比来设置。

举个例子，如果当前浏览器窗口的宽度是1500px，那么计算得到的根元素字体大小就是：

font-size: calc(100vw/750); /* 100vw/750 = 1500/750 = 2 */
/* 根元素字体大小为2倍于16px，即32px */

也就是说，此时根元素的字体大小是16px的两倍，即32px。在这种情况下，如果某一段文本的字号设置为1rem，那么它的实际字号就是根元素字体大小32px，即32px * 1 = 32px。

如果浏览器窗口大小发生改变，例如缩小为750px，那么计算得到的根元素字体大小就是：

font-size: calc(100vw/750); /* 100vw/750 = 750/750 = 1 */
/* 根元素字体大小为16px */

也就是说，此时根元素字体大小恢复到了设计稿中的大小16px。在这种情况下，如果某一段文本的字号仍然设置为1rem，那么它的实际字号就是根元素字体大小16px，即16px * 1 = 16px。

综上所述，通过将根元素字体大小设置为屏幕宽度的一定比例，可以实现自适应缩放的效果，让网页内容在任何屏幕下都能保持合适的比例和尺寸，从而提供更好的用户体验。