Медиахарактеристика CSS `orientation`

orientation — CSS-медиахарактеристика, которая позволяет проверить ориентацию области просмотра (или области страницы в постраничных медиа).

Синтаксис

Медиахарактеристика orientation задаётся одним из ключевых слов, перечисленных ниже.

Ключевые слова

portrait

Область просмотра имеет портретную ориентацию, то есть её высота больше или равна ширине.

landscape

Область просмотра имеет альбомную ориентацию, то есть её ширина больше высоты.

Примеры

Портретная ориентация

В этом примере в HTML есть три блока. Медиахарактеристика orientation переключает их расположение между строкой (в альбомной ориентации) и столбцом (в портретной ориентации).

Результат примера встроен в <iframe>, высота которого больше ширины, поэтому блоки расположены столбцом.

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Результат

Альбомная ориентация

В этом примере используется точно такой же код, как и в предыдущем: в HTML есть три блока, а медиахарактеристика orientation переключает их расположение между строкой (в альбомной ориентации) и столбцом (в портретной ориентации).

Однако в этом примере результат встроен в <iframe>, высота которого меньше ширины, поэтому блоки расположены строкой.

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Спецификации

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