The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.
In Media Queries Level 3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.
In Media Queries Level 4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <number>. In addition a single <number> as a value is allowable.
@media screen and (min-aspect-ratio: 16/9) { /* … */ }
| Ratio | Usage | |
|---|---|---|
 | 4/3 | Traditional TV format in the twentieth century. |
 | 16/9 | Modern "widescreen" TV format. |
 |
185/100 = 91/50
| The most common movie format since the 1960s. |
 | 239/100 | "Widescreen," anamorphic movie format. |
| Specification |
|---|
| Media Queries Level 4 # values |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
ratio |
3 |
12 |
3.5 |
9 |
9.5 |
5 |
≤37 |
18 |
4 |
14 |
4.2 |
1.0 |
number_value |
No |
No |
70 |
No |
No |
No |
No |
No |
No |
No |
No |
No |
aspect-ratio media feature