Les media queries
La balise meta viewport, @media avec min-width et max-width, les points de rupture, l'approche mobile d'abord, les requêtes d'orientation et de préférences (thème sombre, animations réduites).
- 22 cartes
- 6 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Les chiffres
- Mises en situation
- Comprendre
Quelques cartes du deck
Viewport : de quoi s'agit-il ?
Voir la réponse
Zone de la fenêtre où la page s'affiche. Sur mobile, une balise meta du même nom indique au navigateur de prendre la largeur réelle de l'écran plutôt qu'une largeur de bureau simulée.
Sans
<meta name="viewport" content="width=device-width, initial-scale=1">, un téléphone affiche la page en la dézoomant, et les media queries voient une fenêtre d'environ 980 px.Quelles règles s'appliquent à un écran de 800 px de large ?
```css
.menu { display: block; }
@media (min-width: 600px) { .menu { display: flex; } }
@media (min-width: 1000px) { .menu { gap: 24px; } }`- La règle de base et celle de 600 px
- La règle de base seulement
- Les trois règles
- Celles de 600 px et de 1000 px, sans la règle de base
Voir la réponse
La règle de base et celle de 600 px
La règle de base n'a pas de condition. min-width: 600px est vraie dès 600 px, donc à 800 px ; min-width: 1000px ne l'est pas encore.
@media (min-width: 600px)s'applique quand la largeur du viewport est … à 600 px.Voir la réponse
@media (min-width: 600px)s'applique quand la largeur du viewport est supérieure ou égale à 600 px.La borne est incluse, comme celle de
max-width: 600px: à exactement 600 px, les deux requêtes s'appliquent en même temps. D'où les paires 599 px et 600 px pour séparer deux plages.Media query : de quoi s'agit-il ?
Voir la réponse
Condition posée sur un bloc de règles CSS, qui ne l'applique que si l'écran ou les préférences de la personne la satisfont : largeur, orientation, thème sombre.
Elle ne change rien à la spécificité : les règles qu'elle contient se départagent comme les autres, par spécificité puis par ordre d'écriture.