是否可以在 CSS 中同时使用 vw 和 vh？

Question

当我调整 window 宽度方向的大小时，它看起来不错，但是当调整高度时，文本不会调整大小，这反过来会导致括号溢出。

#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，但这并没有帮助，因为 window 的高度几乎总是小于宽度。是否可以同时使用 vw 和 vh 以便 window 调整宽度和高度大小？

Answer 1

也许，您可以看到属性 word-wrap: break-word ？

否则，你可以看到：

@media all and (orientation: landscape) { /* HERE YOUR CODE */ }

Answer 2

是的，具体取决于您的用例的具体情况。 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;
  }
}

这应该可以让您解决对纵横比的担忧："I've tried using vmin but that does not help as the height of the window is almost always smaller than the width"。

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

是否可以在 CSS 中同时使用 vw 和 vh？

Is it possible to use both vw and vh in CSS?

css

viewport-units