<ratio>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

{"* "}Some parts of this feature may have varying levels of support.

<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) {
  /* … */
}

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

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.