Ориентация
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
CSS медиа-функции orientation может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).
Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.
Синтаксис
Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.
Значения ключевых слов
Пример
HTML
html
<div>Вставка 1</div>
<div>Вставка 2</div>
<div>Вставка 3</div>
CSS
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 |
Совместимость с браузерами
Loading…