<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

也可以看看