Тип данных CSS <ratio>
используется для описания соотношений сторон в медиа-запросах, обозначает соотношения между двумя безразмерными значениями.
Синтаксис
Тип данных <ratio>
состоит из строго положительного <integer>
, за которым следует слэш ('/', Unicode U+002F SOLIDUS
) и второй строго положительный <integer>
. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.
Примеры
Использование в медиа-запросах
@media screen and (min-aspect-ratio: 16/9) { ... }
Общее соотношение сторон
Ratio | Usage | |
---|---|---|
![]() |
4/3 |
Традиционный TV-формат 20th века. |
![]() |
16/9 |
Современный "широкоэкранный" TV-формат. |
![]() |
185/100 = 91/50 (нецелые делимые и делители не допускаются) |
Наиболее распространенный видео-формат в 1960-х. |
![]() |
239/100 (нецелые делимые и делители не допускаются) |
"Широкоэкранный," анаморфный видео-формат. |
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
Media Queries Определение '<ratio>' в этой спецификации. |
Рекомендация | Первое определение. |
Поддержка браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
aspect-ratio
медиа-функция