aspect-ratio
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
语法
宽高比属性被指定为<ratio>值来代表 viewport 的宽高比。其为一个范围，这意味着你可以使用 min-aspect-ratio 和 max-aspect-ratio 分别查询最小和最大的值。
示例
下面的例子包含一个 <iframe>，拥有它自身的 viewport。调整的 <iframe> 宽高来观察 aspect-ratio 的变化。
HTML
html
<div id="inner">
Watch this element as you resize your viewport's width and height.
</div>
CSS
css
/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}
/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* cyan */
}
}
/* 明确的宽高比，放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* red */
}
}
结果
规范
| Specification |
|---|
| Media Queries Level 4 # aspect-ratio |