CSS <ratio> Data Type
<ratio> data type is used for describing aspect ratios in media queries.
<ratio> data type denotes the proportion between two positive
integers. The aspect ratio is expressed as two numbers separated by a forward slash (
/). Space between the numbers and the forward slash is fine.
So both of the following are valid
This particular aspect ratio denotes a width of 16 and a height of 9. But it could also represent a width of 32 with a height of 18. More on this below.
When you see
<ratio> (including the
>) anywhere in the CSS specifications, this refers to the fact that the value can be any valid ratio.
For example, the
device-aspect-ratio media feature accepts
So, you could write the following media query for all screens with an aspect ratio of 16:9:
But you don't necessarily need to know that it's a 16:9 screen. You could also use the actual device size.
So the following media query will match the same devices as the previous media query:
In fact, you could use any set of numbers — as long as they have the correct aspect ratio. So all of the following will match the same devices:
<ratio>data type is defined in Media Queries (W3C Recommendation 19 June 2012)
- It's also being further defined in Media Queries Level 4 (W3C Working Draft)