Тип данных 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 Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5 | IE Полная поддержка 9 | Opera Полная поддержка 9.5 | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
Смотрите также
aspect-ratioмедиа-функция
Метки документа и участники
Метки:
Внесли вклад в эту страницу:
opereverzeva
Обновлялась последний раз:
opereverzeva,