<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.

<ratio> CSS 数据类型用于在媒体查询中描述纵横比，表示两个无单位值之间的比例关系。

语法

在媒体查询第 3 版中，<ratio> 数据类型由一个严格正整数 <integer> 后跟一个斜杠（“/”，Unicode U+002F SOLIDUS）以及第二个严格正整数 <integer> 组成。斜线前后的空格是可选的。第一个数字代表宽度，而第二个数字代表高度。

在媒体查询第 4 版中，<ratio> 数据类型已更新，现在由一个严格正整数 <number> 开头，后跟一个斜杠（“/”，Unicode U+002F SOLIDUS）和第二个严格正整数 <number>。此外，也允许使用单一的 <number> 值。

形式语法

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

示例

在媒体查询中使用

css
@media screen and (min-aspect-ratio: 16/9) {
  /* … */
}

常见的纵横比

Ratio 说明
一个高为 3 个单位，宽为 4 个单位的矩形 4/3 二十世纪的传统电视格式。
一个高为 9 个单位，宽为 16 个单位的矩形 16/9 现代“宽屏”电视格式。
一个高为 1 个单位，宽为 1.85 个单位的矩形 185/100 = 91/50 自 1960 年代以来最普遍的电影格式。
一个高为 1 个单位，宽为 2.39 个单位的矩形 239/100 “宽屏”，失真电影格式。

规范

Specification
CSS Values and Units Module Level 4
# ratio-value

浏览器兼容性

BCD tables only load in the browser

参见