我如何在媒体查询中使用两个纵横比？
How do i use two aspect-ratios in a media query?
我正在尝试为不同的屏幕尺寸设置行为，例如我想为宽高比 320x560 和宽高比 414x736 之间的任何屏幕设置一组 css 规则。
我已经尝试采用与使用最小宽度和最大宽度时可能采用的方法类似的方法。
一切都在这里：codepen
在那里你可以看到我有一个宽度的工作示例被注释掉了，但由于某种原因它不适用于纵横比。
@media (min-aspect-ratio: 600px/495px) and (max-aspect-ratio: 1000px/800px){
div {
color: yellow;
}
}
Firefox 只适用于我的确切比例。
比率本身不是一个值，而是计算的结果。我不相信任何 CSS 引擎被设计用来计算当前纵横比并在两个潜在值之间进行比较，它只适用于当前计算的比率。如果您将侦听器应用于 window 调整大小事件，您将能够在 javascript 中完成此操作。
要在 CSS 中执行此操作，您需要创建多个媒体查询来定义 min-height、max-height、min-width、max-width 以及一个单一的比率来创建一个范围。
虽然是个有趣的问题，但之前从未想过尝试纵横比范围。实施起来会有用。
我正在尝试为不同的屏幕尺寸设置行为，例如我想为宽高比 320x560 和宽高比 414x736 之间的任何屏幕设置一组 css 规则。
我已经尝试采用与使用最小宽度和最大宽度时可能采用的方法类似的方法。
一切都在这里：codepen 在那里你可以看到我有一个宽度的工作示例被注释掉了，但由于某种原因它不适用于纵横比。
@media (min-aspect-ratio: 600px/495px) and (max-aspect-ratio: 1000px/800px){
div {
color: yellow;
}
}
Firefox 只适用于我的确切比例。
比率本身不是一个值，而是计算的结果。我不相信任何 CSS 引擎被设计用来计算当前纵横比并在两个潜在值之间进行比较，它只适用于当前计算的比率。如果您将侦听器应用于 window 调整大小事件，您将能够在 javascript 中完成此操作。
要在 CSS 中执行此操作，您需要创建多个媒体查询来定义 min-height、max-height、min-width、max-width 以及一个单一的比率来创建一个范围。
虽然是个有趣的问题，但之前从未想过尝试纵横比范围。实施起来会有用。