Css 如何在媒体查询中使用两个纵横比？

我试图为不同的屏幕大小设置一个行为，例如，我想为宽高比320x560和宽高比414x736之间的任何屏幕设置一组css规则

我已经尝试过采用类似的方法，就像使用“最小宽度”和“最大宽度”时一样

一切都在这里： 在这里你可以看到，我有一个注释掉了宽度的工作示例，但由于某些原因，它不能与纵横比一起工作

@media (min-aspect-ratio: 600px/495px) and (max-aspect-ratio: 1000px/800px){
    div {
    color: yellow;
    }
}

---

Firefox对我来说只能以精确的比例工作

比率本身不是一个值，而是计算的结果。我不相信任何CSS引擎设计来计算当前的纵横比，并将其与两个潜在值进行比较，它只适用于当前计算的纵横比。如果将侦听器应用于窗口调整大小事件，则可以在javascript中实现这一点

要在CSS中实现这一点，您需要创建多个媒体查询，这些查询定义最小高度、最大高度、最小宽度、最大宽度以及单个比率来创建一个范围

---

有趣的问题是，以前从未想过尝试纵横比范围。将有助于实施

Firefox对我来说只能以精确的比例工作

比率本身不是一个值，而是计算的结果。我不相信任何CSS引擎设计来计算当前的纵横比，并将其与两个潜在值进行比较，它只适用于当前计算的纵横比。如果将侦听器应用于窗口调整大小事件，则可以在javascript中实现这一点

要在CSS中实现这一点，您需要创建多个媒体查询，这些查询定义最小高度、最大高度、最小宽度、最大宽度以及单个比率来创建一个范围

---

有趣的问题是，以前从未想过尝试纵横比范围。将有助于实施

我不知道情况是否如此，但px值是否受支持@SuperDJ px值不受支持，我编辑了代码，但问题仍然存在。Hi Endrit，您的示例在Firefox上对我有效。你测试的浏览器是什么？@slynagh主要是在safari上，但我刚刚在chrome上试过，它似乎也不起作用，也许它们不受支持？Endrit你的例子也适用于chrome。也许你期望的结果与你得到的结果不同？当我调整窗口大小时，在特定点上，文本变为黄色。这是一个很窄的范围，这是你想要的吗？也许你的意思是精确的屏幕像素尺寸？我不知道是这样的，但是px值受支持吗@SuperDJ px值不受支持，我编辑了代码，但问题仍然存在。Hi Endrit，您的示例在Firefox上对我有效。你测试的浏览器是什么？@slynagh主要是在safari上，但我刚刚在chrome上试过，它似乎也不起作用，也许它们不受支持？Endrit你的例子也适用于chrome。也许你期望的结果与你得到的结果不同？当我调整窗口大小时，在特定点上，文本变为黄色。这是一个很窄的范围，这是你想要的吗？也许你的意思是精确的屏幕像素尺寸？这不是真的。计算出的纵横比确实有一个范围，在1.21212和1.25之间。Endrit的示例就是在这两个值之间工作的。@slynagh抱歉，我的意思是在CSS中数学不起作用，因为CSS不会动态计算纵横比数学来创建比较，修复了我的答案。这不是真的。计算出的纵横比确实有一个范围，在1.21212和1.25之间。Endrit的示例就是在这两个值之间工作的。@slynagh抱歉，我的意思是在CSS中数学不起作用，因为CSS不会动态计算纵横比数学来创建比较，修复了我的答案。