Тип данных 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>' в этой спецификации.
Рекомендация Первое определение.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<ratio>Chrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva
Обновлялась последний раз: opereverzeva,