aspect-ratio
语法
宽高比属性被指定为<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