orientation
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La caractéristique média CSS orientation permet de tester l'orientation de la zone d'affichage (ou de la boîte de page, pour les médias paginés).
Note : Cette caractéristique ne correspond pas à l'orientation de l'appareil. Ouvrir le clavier virtuel sur de nombreux appareils en mode portrait peut rendre la zone d'affichage plus large que haute, ce qui amènera le navigateur à utiliser les styles paysage au lieu de portrait.
Syntaxe
La caractéristique orientation se définit grâce à l'un des mots-clés suivants.
Mots-clés
Exemples
Orientation portrait
Dans cet exemple, nous avons trois boîtes dans le HTML, et nous utilisons la caractéristique média orientation pour passer d'une disposition en ligne (en paysage) à une disposition en colonne (en portrait).
La sortie de l'exemple est intégrée dans un <iframe> dont la hauteur est supérieure à sa largeur, de sorte que les boîtes obtiennent une disposition en colonne.
HTML
<div>Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 3</div>
CSS
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
Résultat
Orientation paysage
Cet exemple utilise exactement le même code que l'exemple précédent : il y a trois boîtes dans le HTML, et la caractéristique média orientation permet de passer d'une disposition en ligne (en paysage) à une disposition en colonne (en portrait).
Cependant, ici, la sortie de l'exemple est intégrée dans un <iframe> dont la hauteur est inférieure à la largeur, de sorte que les boîtes sont disposées en ligne.
HTML
<div>Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 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;
}
}
Spécifications
| Specification |
|---|
| Media Queries Level 4 # orientation |
Compatibilité des navigateurs
Chargement…