Web.QHMIT.com

CSS <ratio> Data Type

The CSS <ratio> data type is used for describing aspect ratios in media queries.

The <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 <ratio> values:

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.

A <ratio> Example

When you see <ratio> (including the < and >) 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 <ratio> value.

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:

CSS Specifications