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之间的转换关系，灵活地根据不同的设计需要来选择使用合适的长度单位。
会了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。
综上所述，通过将根元素字体大小设置为屏幕宽度的一定比例，可以实现自适应缩放的效果，让网页内容在任何屏幕下都能保持合适的比例和尺寸，从而提供更好的用户体验。