The <ratio> CSS data type represents a ratio. A ratio is a statement of how two numbers compare. It is a comparison of the size of one number to the size of another number. All of the lines below are different ways of stating the same ratio.
2/3
2:3
2 to 3
In CSS, only the first of the above ratio notations is valid. So a ratio in CSS is expressed by 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 slash. For example, both 2/3 and 2 / 3 are valid values.
A ratio is used in CSS media queries to describe the aspect ratio of the targeted display area of the output device. The aspect ratio of a device is the ratio of horizontal pixels (first term) to vertical pixels (second term).
Trivia and Notes
The two most common aspect ratios in home video are 4:3 (or standard) and 16:9 (or wide screen). Most older TVs and computer monitors have the 4:3 ratio. The 16:9 ratio is the native aspect ratio for most HDTV programming.
Content suitable for wide screens would be “squished” if viewed on a standard screen, and the standard screen content would be stretched on a wide-screen display.
Examples
If a screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as “16:9” or wide-screen displays), the following Media Queries will all match the device:
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
Browser Support
Ratio values are supported in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, support starts from version 9.
