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.


  Ratio Usage
Ratio4_3.png 4/3 Traditional TV format in the 20th century.
Ratio16_9.png 16/9 Modern, 'widescreen', TV format.
Ratio1_1.85.png 185/100 = 91/50
(non-integer dividends and divisors are not allowed)
The most common movie format since the 1960s.

(non-integer dividends and divisors are not allowed)

The 'widescreen', anamorphic, movie format.


Specification Status Comment

CSS Media Queries Level 3

Proposed Recommendation  

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support <4 3.5 (1.9.1) 9 [1] 9.5 1.0 (?) [2]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support yes yes ? yes yes

Tags (0)

Edit tags
  • No tags

Attachments (4)

Attach file