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.

aspect-ratio CSS 媒体属性 可以用来测试 viewport 的宽高比。

语法

宽高比属性被指定为<ratio>值来代表 viewport 的宽高比。其为一个范围,这意味着你可以使用 min-aspect-ratiomax-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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
aspect-ratio media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support