Hermit Notebook

Mémo sur les media queries CSS3

Mémo sur les media queries CSS3

Image par Clovis Cheminot sur Pixabay

Rappel: tu peux faire défiler à gauche et à droite les longs blocs de code.

Intro

Les “media queries” permettent à l’interface utilisateur HTML de s’adapter à l’appareil du visiteur du site. Ce billet se concentre sur un court rappel des “media queries” couramment utilisées pour les designs réactifs (2022).
Voir une présentation plus détaillée ici.

Syntaxe des Media query

1
2
3
4
5
6
7
8
9
10
11
@media [not|only] mediatype and (condition: breakpoint) {

/* CSS rules */

}

@media mediatype and (orientation: portrait|landscape) {

/* CSS rules */

}

Exemples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@media print {
  body {
    color: black;
  }
}

@media screen and (max-width: 576px) {

  .responsive {
    width: 100%;
  }

}

@media only screen and (orientation: landscape) {
  .responsive {
    width: 20%;
  }
}

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  p.responsive {
    font-size: 2em;
    padding: 2em;
    border: 0.5em solid black;
    background: white;
  }
}

Référence pour les “breakpoints”

On peut s’inspirer de la célèbre librairie Bootstrap.

Nom Nom court Largeur min Largeur max (excluded)
Extra small xs 0 576px
Small sm 576px 768px
Medium md 768px 992px
Large lg 992px 1200px
Extra large xl 1200px 1400px
Extra extra large xxl 1400px ∞

Référence pour les “media queries”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* ****************** xs : extra small ****************** */
@media screen and (max-width: 575px) {

  /* CSS rules */
	
}

/* ****************** sm : small ****************** */
@media screen and (min-width: 576px) and (max-width: 767px) {

  /* CSS rules */
	
}

/* ****************** md : medium ****************** */
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* CSS rules */
	
}

/* ****************** lg : large ****************** */
@media screen and (min-width: 992px) and (max-width: 1199px) {

  /* CSS rules */
	
}

/* ****************** xl : extra large ****************** */
@media screen and (min-width: 1200px) and (max-width: 1399px) {

  /* CSS rules */
	
}

/* ****************** xxl : extra extra large ****************** */
@media screen and (min-width: 1400px) {

  /* CSS rules */
	
}

Voilà, c’est tout pour ce mémo. Laisse un commentaire ✍️ et un “J’aime” ❤️ si tu as trouvé ce post utile 😉

À bientôt !

N’ arrête jamais d’apprendre !


Dernière modification le ven. 23 déc. 2022 à 10:54 GMT+00:00.

Contents

  1. 1. Intro
  2. 2. Syntaxe des Media query
  3. 3. Référence pour les “breakpoints”
  4. 4. Référence pour les “media queries”