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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<ratio>Chrome Полная поддержка 3Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 4.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4.2Samsung Internet Android Полная поддержка 1.0
Accepts <number> / <number> or single <number> as a value.Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 70IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

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

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