orientation CSS-Media-Feature

Syntax

Die orientation-Feature wird als ein Schlüsselwortwert angegeben, der aus der untenstehenden Liste ausgewählt wird.

Schlüsselwortwerte

portrait

Der Viewport ist im Hochformat, das heißt, die Höhe ist größer oder gleich der Breite.

landscape

Der Viewport ist im Querformat, das heißt, die Breite ist größer als die Höhe.

Beispiele

Hochformat

In diesem Beispiel haben wir drei Boxen im HTML und verwenden die orientation-Media-Feature, um zwischen einer Zeilenanordnung (im Querformat) und einer Spaltenanordnung (im Hochformat) zu wechseln.

Die Beispielausgabe ist in ein <iframe> eingebettet, dessen Höhe größer ist als seine Breite, sodass die Boxen eine Spaltenanordnung erhalten.

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

Ergebnis

Querformat

Dieses Beispiel hat exakt den gleichen Code wie das vorherige Beispiel: Es hat drei Boxen im HTML und verwendet die orientation-Media-Feature, um zwischen einer Zeilenanordnung (im Querformat) und einer Spaltenanordnung (im Hochformat) zu wechseln.

In diesem Beispiel ist die Beispielausgabe jedoch in ein <iframe> eingebettet, dessen Höhe kleiner ist als seine Breite, sodass die Boxen eine Zeilenanordnung erhalten.

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

Spezifikationen

Browser-Kompatibilität