orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die orientation CSS Media-Feature kann verwendet werden, um die Ausrichtung des Viewports (oder des Seitenrahmens bei paged media) zu testen.

Hinweis: Diese Funktion entspricht nicht der Geräte-Ausrichtung. Das Öffnen der Soft-Tastatur auf vielen Geräten im Hochformat führt dazu, dass der Viewport breiter als hoch wird, wodurch der Browser Landschaftsstile anstelle von Hochformat verwendet.

Syntax

Das Feature orientation wird als Schlüsselwortwert, ausgewählt aus der folgenden Liste, angegeben.

Schlüsselwortwerte

portrait: Der Viewport befindet sich in Hochformat-Ausrichtung, d.h. die Höhe ist größer oder gleich der Breite.
landscape: Der Viewport befindet sich in Querformat-Ausrichtung, d.h. die Breite ist größer als die Höhe.

Beispiele

Hochformat-Ausrichtung

In diesem Beispiel haben wir drei Boxen im HTML und verwenden das orientation Media-Feature, um zwischen einer Zeilen-Layout (im Querformat) und einem Spalten-Layout (im Hochformat) zu wechseln.

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

HTML

html

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

CSS

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-Ausrichtung

Dieses Beispiel hat genau denselben Code wie das vorherige Beispiel: Es hat drei Boxen im HTML und verwendet das orientation Media-Feature, um zwischen einer Zeilen-Layout (im Querformat) und einem Spalten-Layout (im Hochformat) zu wechseln.

Allerdings ist in diesem Beispiel die Beispielausgabe in ein <iframe> eingebettet, dessen Höhe kleiner als seine Breite ist, sodass die Boxen ein Zeilen-Layout erhalten.

HTML

html

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

CSS

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

Specification
Media Queries Level 4 # orientation

Browser-Kompatibilität

BCD tables only load in the browser