aspect-ratio - CSS（层叠样式表） 编辑

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>

_Example

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 */
  }
}

used iframe and DataURL to enable this iframe could resize

HTML

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">

<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">

</iframe>

CSS

iframe{
  display:block;
}

JavaScript

outer.style.width=outer.style.height="165px"

w.onchange=w.oninput=function(){
  outer.style.width=w.value+"px"
  wf.textContent="width:"+w.value
}
h.onchange=h.oninput=function(){
  outer.style.height=h.value+"px"
  hf.textContent="height:"+h.value
}

结果

规范

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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.