<ratio> CSS数据类型,用于描述媒体查询中的宽高比,表示两个无单位值之间的比例。
句法
在Media Queries Level 3中,<ratio>数据类型包括一个正数的<integer>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度,第二个数字代表高度。
在Media Queries Level 4中,<ratio>数据类型包括一个正数的<number>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<number>值。此外,允许使用单个<number>作为值。
例子
在媒体查询中使用
@media screen和(min-aspect-ratio:16/9){...}
常见的宽高比
( (
比 | 用法 | |
---|---|---|
![]() |
4/3 |
在20传统电视制式格式。 |
![]() |
16/9 |
现代"宽屏”电视格式。 |
![]() |
185/100 = 91/50 (不允许非整数除数和除数) |
自20世纪60年代以来最常见的电影格式。 |
![]() |
239/100 (不允许使用非整数红利和除数) |
"宽屏”,变形电影格式。 |
产品规格
规范 | 状态 | 评论 |
---|---|---|
Media Queries <ratio> |
Recommendation | 初步定义。 |
浏览器兼容性
BCD tables only load in the browser
此页面上的兼容性表由结构化数据生成。如果您想为数据做出贡献,请查看https://github.com/mdn/browser-compat-data并向我们发送拉取请求。
也可以看看
aspect-ratio
媒体功能