aspect-ratio

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

语法

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