From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/@media/orientation/index.html | 88 ++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 files/fr/web/css/@media/orientation/index.html (limited to 'files/fr/web/css/@media/orientation') diff --git a/files/fr/web/css/@media/orientation/index.html b/files/fr/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..2eab162ff7 --- /dev/null +++ b/files/fr/web/css/@media/orientation/index.html @@ -0,0 +1,88 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/orientation +--- +
{{CSSRef}}
+ +

orientation est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (viewport) (ou la boîte de la page pour les média paginés).

+ +

Syntaxe

+ +

La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

+ +
+
portrait
+
La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).
+
landscape
+
La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).
+
+ +

Exemples

+ +

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

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.orientation")}}

-- cgit v1.2.3-54-g00ecf