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

【问题标题】：How do i use two aspect-ratios in a media query?如何在媒体查询中使用两个纵横比？
【发布时间】：2019-05-22 04:46:27
【问题描述】：

我正在尝试为不同的屏幕尺寸设置行为，例如我想为纵横比 320x560 和纵横比 414x736 之间的任何屏幕设置一组 css 规则。

我已经尝试过采用与使用 min-width 和 max-width 类似的方法。

一切都在这里：codepen 在那里你可以看到我有一个注释掉宽度的工作示例，但由于某种原因它不适用于纵横比。

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

【问题讨论】：

我不知道是这种情况，但是否支持 px 值？ developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
@SuperDJ px 值不受支持，我编辑了代码但问题仍然存在
您好 Endrit，您的示例在 Firefox 上对我有用。你在什么浏览器上测试？
@slynagh 主要在 safari 上，但我只是在 chrome 中尝试过，它似乎也不在那里工作，也许它们不受支持？
Endrit 您的示例也适用于 chrome。也许您期待的结果与您得到的不同？当我调整窗口大小时，在特定点文本变为黄色。这是一个非常狭窄的范围，这是你想要的吗？也许您的意思是精确定位屏幕像素尺寸？

【解决方案1】：

Firefox 只适用于我的确切比例。

比率本身并不是一个值，而是计算的结果。我不相信任何 CSS 引擎都旨在计算当前的纵横比并在两个潜在值之间进行比较，它只适用于当前计算的比率。如果您将侦听器应用于窗口调整大小事件，您将能够在 javascript 中完成此操作。

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

虽然是个有趣的问题，但之前从未想过尝试宽高比范围。实施起来会很有用。

【讨论】：