Ориентация
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS медиа-функции orientation
может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).
Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.
Синтаксис
Функция orientation
указывается в качестве значения ключевого слова, выбранного из списка ниже.
Значения ключевых слов
Пример
HTML
<div>Вставка 1</div>
<div>Вставка 2</div>
<div>Вставка 3</div>
CSS
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
Результат
Характеристики
Specification |
---|
Media Queries Level 4 # orientation |
Совместимость с браузерами
BCD tables only load in the browser