Тип данных 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>' в этой спецификации. |
Рекомендация | Первое определение. |
Поддержка браузерами
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.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <ratio> | Chrome Полная поддержка 3 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5 | IE Полная поддержка 9 | Opera Полная поддержка 9.5 | Safari Полная поддержка 4.1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 4.2 | Samsung Internet Android Полная поддержка 1.0 |
| Accepts <number> / <number> or single <number> as a value. | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Полная поддержка 70 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки Нет | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
Смотрите также
aspect-ratioмедиа-функция