orientation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die orientation CSS Media-Abfrage kann verwendet werden, um die Ausrichtung des Viewports (oder des Seitenbereichs bei gedruckten Medien) zu testen.
Hinweis: Diese Funktion entspricht nicht der Ausrichtung des Geräts. Das Öffnen der virtuellen Tastatur auf vielen Geräten im Hochformat führt dazu, dass der Viewport breiter als hoch wird, wodurch der Browser anstatt Hochformat-Stile die Querformat-Stile verwendet.
Syntax
Das orientation-Feature wird als Schlüsselwort angegeben, das aus der untenstehenden Liste ausgewählt wird.
Schlüsselwort-Werte
Beispiele
Hochformat-Ausrichtung
In diesem Beispiel haben wir drei Boxen im HTML und verwenden das orientation-Media-Feature, um zwischen einem Reihenlayout (im Querformat) und einem Spaltenlayout (im Hochformat) zu wechseln.
Der Beispielausgabe ist in ein <iframe> eingebettet, dessen Höhe größer als seine Breite ist, sodass die Boxen ein Spaltenlayout 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-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 einem Reihenlayout (im Querformat) und einem Spaltenlayout (im Hochformat) zu wechseln.
In diesem Beispiel ist die Beispielausgabe jedoch in ein <iframe> eingebettet, dessen Höhe kleiner als seine Breite ist, sodass die Boxen ein Reihenlayout 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
| Specification |
|---|
| Media Queries Level 4 # orientation |