<ratio>

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

Синтаксис

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

Примеры

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

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

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

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

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

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

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

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
<ratio>	Chrome Полная поддержка 3	Edge Полная поддержка 12	Firefox Полная поддержка 3.5	IE Полная поддержка 9	Opera Полная поддержка 9.5	Safari Полная поддержка 5	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 4.2	Samsung Internet Android Полная поддержка 1.0
Accepts <number> / <number> or single <number> as a value.	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 70 Отключено Полная поддержка 70 Отключено Отключено From version 70: this feature is behind the `layout.css.aspect-ratio-number.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Нет поддержки Нет	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка: Полная поддержка
Нет поддержки: Нет поддержки
Пользователь должен сам включить эту возможность.: Пользователь должен сам включить эту возможность.

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

aspect-ratio медиа-функция