css - 按浏览器窗口的纵横比更改的元素属性

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>