Definition and Usage
The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values. It is a strictly positive <integer> followed by a slash (‘/’, Unicode U+002F SOLIDUS) and a second strictly positive <integer>. There may be spaces before and after the solidus.
Examples
Ratio |
Usage |
4/3 |
Traditional TV format in the 20th century. |
16/9 |
Modern, ‘widescreen’, TV format. |
185/100 = 91/50(non-integer dividends and divisors are not allowed) |
The most common movie format since the 1960s. |
239/100(non-integer dividends and divisors are not allowed) |
The ‘widescreen’, anamorphic, movie format. |
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
Basic support |
<4 |
3.5 (1.9.1) |
9 |
9.5 |
1.0 (?) |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
yes |
yes |
? |
yes |
yes |