Aller au contenu

Syntaxe

Découverte 1

Analysez le code et observez le résulat.

Sur codePen

CSS Le code complet à tester se trouve sur CodePen

Syntaxe

@media (condition) {
  /* Règles CSS */
}

@media : Mot-clé qui initie une media query.

Condition : Spécifie le critère (largeur, hauteur, orientation, etc.).

Règles CSS : Styles appliqués si la condition est remplie.

Types de Media Queries

Basées sur la largeur de l'écran

  • Utiles pour adapter le design sur différents écrans (mobile, tablette, ordinateur).
  • Propriété principale : min-width et max-width.
/* Styles pour les écrans de 600px et moins */
@media (max-width: 600px) {

}

Basées sur l'orientation de l'écran

  • orientation: portrait : Pour les écrans plus hauts que larges (téléphones).
  • orientation: landscape : Pour les écrans plus larges que hauts (tablettes à l'horizontale).
@media (orientation: landscape) {
  .sidebar {
    display: none;
  }
}

Autres

width, height(*): largeur et hauteur du viewport (écran) ou de la zone d'édition d'une page d'un type de media paginé

device-width, device-height(*) : largeur et hauteur de la fenêtre (écran), de la page entière (media paginé) orientation: portrait ou paysage (i.e: portrait, landscape)

resolution(*): densité des pixels (i.e: 300dpi)

aspect-ratio(*): rapport largeur (width) /hauteur (height). (i.e: 16/9, 4/3, …)

device-aspect-ratio(*): rapport largeur (device-width) /hauteur (device-height). (i.e: 16/9, 4/3, …)

Les propriétés marquées un astérisque (*) existent avec les préfixes max-, min-.

Combinaison de Conditions

On peut combiner des conditions avec and, , (ou), et not.

@media (min-width: 600px) and (orientation: portrait) {
  /* Styles pour écrans ≥ 600px en mode portrait */
}