<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.
* Some parts of this feature may have varying levels of support.
语法
形式语法
<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 |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<ratio> | ||||||||||||
Accepts a single <number> as a value. |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
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.
参见
aspect-ratio
媒体特性