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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support