CSS Value: Ratio

The proportional relationship between two values. The ratio value is made up of a positive, non-zero integer, followed by /, followed by another positive integer.

Valid ratios include 16/9, 4/3, 800/600, and 1/1.

Ratio values are used to assess screen shape by the aspect-ratio and device-aspect-ratio medias features (and their min- and max- buddies) of media queries.

Example


@media (min-aspect-ratio: 16/9) {
    body {
        color: red;
    }
}