Ориентация

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