Ориентация
CSS медиа-функции orientation
может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).
Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.
Синтаксис
Функция orientation
указывается в качестве значения ключевого слова, выбранного из списка ниже.
Значения ключевых слов
portrait
-
Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.
landscape
-
Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.
Пример
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;
}
}
Результат
Характеристики
Спецификация | Статус | Комментарий |
---|---|---|
Media Queries Level 4 Определение 'orientation' в этой спецификации. |
Кандидат в рекомендации | Бе изменений. |
Media Queries Определение 'orientation' в этой спецификации. |
Рекомендация | Начальное определение. |
Совместимость браузеров
BCD tables only load in the browser