是否可以在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更好。

Answer 2

也许，你可以看到属性自动换行：break-word？

否则，您可以看到：

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