<ratio>

       <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){...}

常见的宽高比

( (

用法
Ratio4_3.png 4/3 在20传统电视制式格式
Ratio16_9.png 16/9 现代"宽屏”电视格式。
Ratio1_1.85.png 185/100= 91/50
(不允许非整数除数和除数)
自20世纪60年代以来最常见的电影格式。
Ratio1_2.39.png 239/100
(不允许使用非整数红利和除数)
"宽屏”,变形电影格式。

产品规格

规范 状态 评论
Media Queries
<ratio>
Recommendation 初步定义。

浏览器兼容性

BCD tables only load in the browser

也可以看看