根据浏览器窗口的纵横比更改的元素属性

Question

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

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

有办法解决这个问题吗？

@media（最大纵横比：5/3）{ 。容器 { 高度：800 像素 } }

Answer 1

一般都可以，看下面的sn-p。

你的问题可能在别处

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

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

<div >test</div>