<ratio>

Тип данных CSS <ratio> используется для описания соотношений сторон в медиа-запросах, обозначает соотношения между двумя безразмерными значениями.

Синтаксис

Тип данных <ratio> состоит из строго положительного  <integer>, за которым следует слэш  ('/', Unicode U+002F SOLIDUS) и второй строго положительный <integer>. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.

Примеры

Использование в медиа-запросах

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

Общее соотношение сторон

  Ratio Usage
Ratio4_3.png 4/3 Традиционный TV-формат 20th века.
Ratio16_9.png 16/9 Современный "широкоэкранный" TV-формат.
Ratio1_1.85.png 185/100 = 91/50
(нецелые делимые и делители не допускаются)
Наиболее распространенный видео-формат в 1960-х.
Ratio1_2.39.png 239/100
(нецелые делимые и делители не допускаются)
"Широкоэкранный," анаморфный видео-формат.

Спецификации

Спецификация Статус Комментарий
Media Queries
Определение '<ratio>' в этой спецификации.
Рекомендация Первое определение.

Поддержка браузерами

BCD tables only load in the browser

Смотрите также