要按浏览器窗口的宽高比更改的元素属性

Question

当浏览器窗口的宽高比低于5/3时，我想将我的网站主容器（div）的高度从某个值更改为另一个值。

我用@media (max-aspect-ratio: 5/3)尝试过，但浏览器没有考虑这个规则。在Chrome中，当您切换到检查模式时，您可以看到它跳过规则。这种情况并不是它看到@media查询，而是因为命令优先级而忽略了它中的命令，但是甚至看不到查询。如果添加像@media (max-height:1024px)这样的规则，您可以在检查器模式中看到@media...规则被放入命令列表中。然而，它完全跳过了@media...aspect-ratio...线，就像它没有写在那里一样。这不是因为代码的其余部分，而是浏览器本身忽略了查询。

无论如何要解决这个问题吗？

@media (max-aspect-ratio: 5/3) {
  .container {
     height:800px
  }
}

Answer 1

它通常有效，请参阅以下代码段。

你的问题可能在其他地方

div {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
}

@media (max-aspect-ratio: 5/3) {
  div {
    background: yellow;
  }
}

<div >test</div>