aspect-ratio

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

语法

宽高比属性被指定为<ratio>值来代表viewport的宽高比。其为一个范围，这意味着你可以使用min-aspect-ratio和max-aspect-ratio分别查询最小和最大的值。

例子

下面的例子包含一个 <iframe> ，拥有它自身的viewport。调整的<iframe>宽高来观察aspect-ratio的变化。

HTML

<div id='inner'>
  Watch this element as you resize your viewport's width and height.
</div>

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	Status	Comment
Media Queries Level 4 aspect-ratio	Candidate Recommendation	No change.
Media Queries aspect-ratio	Recommendation	Initial definition.

浏览器兼容性

BCD tables only load in the browser