отношение-сторон-устройства
Устаревший: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут её всё ещё поддерживать, она может быть удалена из соответствующих веб-стандартов, находится в процессе удаления или сохраняется только для совместимости. Пожалуйста, избегайте её использования и, по возможности, обновите существующий код; обратитесь к таблице совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
Примечание: Для запроса отношения сторон области просмотра разработчики должны использовать медиа-функцию aspect-ratio вместо этого.
Медиа-функция device-aspect-ratio CSS медиа может использоваться для проверки отношения сторон ширины к высоте устройства вывода.
Синтаксис
Функция device-aspect-ratio задаётся как <ratio>. Это функция диапазона, что означает, что вы также можете использовать префиксные min-device-aspect-ratio и max-device-aspect-ratio варианты для запроса минимальных и максимальных значений соответственно.
Примеры
Использование min-device-aspect-ratio
article {
padding: 1rem;
}
@media screen and (min-device-aspect-ratio: 16/9) {
article {
padding: 1rem 5vw;
}
}
Спецификации
| Спецификация |
|---|
| Уровень 4 запросов к медиа # отношение-сторон-устройства |
| Уровень 4 запросов к медиа # отношение-сторон-устройства |
Совместимость браузеров
| Десктопные | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
device-aspect-ratio |
1 | 12 | 2 | 10 | 3 | 18 | 4 | 10.1 | 1 | 1.0 | ≤37 |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-aspect-ratio
