<ratio>
Quick Summary for <ratio>
The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.
Code Usage for <ratio>
@media screen and (min-aspect-ratio: 16/9) { ... } 
More Details for <ratio>

<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

Ratio Usage
4/3 Traditional TV format in the twentieth century.
16/9 Modern "widescreen" TV format.
185/100 = 91/50 The most common movie format since the 1960s.
239/100 "Widescreen," anamorphic movie format.

Specifications

Specification
Media Queries Level 4 # values

See also

aspect-ratio media feature Select your preferred language English (US)DeutschFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
therock Somewhere along this crazy road I learned (often times the hard way) the most important things I can do is be authentic, trust my gut, be the hardest worker in the room, celebrate the mistakes, be a grateful man and always remember that it's nice to be important, but it's more important to be nice.
The Rock
Random CSS Property

:first-of-type

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
:first-of-type css reference