<ratio>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
语法
形式语法
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
示例
在媒体查询中使用
css
@media screen and (min-aspect-ratio: 16/9) {
/* … */
}
常见的纵横比
Ratio | 说明 | |
---|---|---|
4/3 |
二十世纪的传统电视格式。 | |
16/9 |
现代“宽屏”电视格式。 | |
185/100 = 91/50 |
自 1960 年代以来最普遍的电影格式。 | |
239/100 |
“宽屏”,失真电影格式。 |
规范
Specification |
---|
CSS Values and Units Module Level 4 # ratio-value |
浏览器兼容性
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
参见
aspect-ratio
媒体特性