Ориентация

CSS медиа-функции orientation может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).

Примечание: Эта функция не соответствует ориентации устройства. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.

Синтаксис

Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.

Значения ключевых слов

portrait: Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.
landscape: Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.

Пример

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;
  }
}

Результат

Характеристики

Спецификация	Статус	Комментарий
Media Queries Level 4 Определение 'orientation' в этой спецификации.	Кандидат в рекомендации	Бе изменений.
Media Queries Определение 'orientation' в этой спецификации.	Рекомендация	Начальное определение.

Совместимость браузеров

BCD tables only load in the browser