的CSS 数据类型,用于描述高宽比在媒体查询,表示两个无量纲值之间的比例。<ratio>
句法
所述<ratio>数据类型包括严格为正的({cssxref("<")>”)}}后跟一个正斜线('/',的Unicode U+002F SOLIDUS)和第二严格正({cssxref("<")>”)}}。斜杠前后的空格是可选的。第一个数字代表宽度,而第二个数字代表高度。
例子
在媒体查询中使用
@media screen和(min-aspect-ratio：16/9){...}
常见的宽高比
( (| 比 | 用法 | |
|---|---|---|
 |
4/3 |
在20传统电视制式个世纪。 |
 |
16/9 | 现代"宽屏”电视格式。 |
 |
185/100= 91/50(不允许非整数除数和除数) |
自20世纪60年代以来最常见的电影格式。 |
 |
239/100(不允许使用非整数红利和除数) | "宽屏”,变形电影格式。 |
产品规格
| 规范 | 状态 | 评论 |
|---|---|---|
| Media Queries <ratio> |
Recommendation | 初步定义。 |
浏览器兼容性
此页面上的兼容性表由结构化数据生成。如果您想为数据做出贡献,请查看https://github.com/mdn/browser-compat-data并向我们发送拉取请求。
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <ratio> | Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 4.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 4.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
也可以看看
aspect-ratio媒体功能