CSS Reference Data Type

<ratio>

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.

standard-vs-widescreen
Standard 4/3 ratio screen vs. wide-screen 16/9 ratio screen

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.

Written by

Last updated February 4, 2015 at 4:57 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.