css - CSS 中可以同时使用 vw 和 vh 吗？

Question

当我调整窗口宽度大小时，它看起来不错，但调整高度时，文本大小不会调整，这反过来会在括号上产生溢出。

#body div[class^="side-"] ol li p.game a {
  color: #000000;
  font: bold .7vw/1 tungsten, sans-serif;
  height: auto;
  width: auto;
  padding: 0;
  box-shadow: 0;
}

我尝试过使用vmin，但这并没有帮助，因为窗口的高度几乎总是小于宽度。是否可以同时使用 vw 和 vh 以便窗口同时调整宽度和高度大小？

Answer 1

是的，具体取决于您的用例的具体情况。 CSS 允许aspect-ratio 媒体查询。这可以让您为各种宽高比拥有一个 vmin 或 vw/vh 大小。基于您的粗略示例:

html {
  color: #000000;
  font: bold 7vw tungsten, sans-serif;
  height: auto;
  width: auto;
  padding: 0;
  box-shadow: 0;
  font-size: 20vmin;
}

@media (min-aspect-ratio: 3/1) {
  html {
    color: #00a;
    font-size: 14vmin;
  }
}

这应该可以让您解决对宽高比的担忧:“我尝试过使用 vmin，但这没有帮助，因为窗口的高度几乎总是小于宽度”。

根据您的设计，当屏幕较宽时使用 vw 和当屏幕较高时使用 vh 可能比使用 vmin 更好如上所示。