The <strong><code>&lt;ratio&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSSTypes">data type</a>, used for describing <a href="/en-US/docs/Web/CSS/@media/aspect-ratio">aspect ratios</a> in <a href="/en-US/docs/Web/CSS/MediaQueries">media queries</a>, denotes the proportion between two unitless values.

@media screen and (min-aspect-ratio: 16/9) { ... } 

<ratio>

The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.

Syntax

In Media Queries Level 3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

In Media Queries Level 4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <number>. In addition a single <number> as a value is allowable.

Examples

Use in a media query

@media screen and (min-aspect-ratio: 16/9) { ... } 

Common aspect ratios

Specifications

See also