Chargement...

Media queries CSS

Le design responsive a posé l’état d’esprit : un arbre HTML, viewport meta, coque fluide, unités relatives. Les media queries sont l’interrupteur — des blocs CSS qui ne s’activent que lorsqu’une condition est remplie (souvent la largeur du viewport). Cette leçon enseigne la syntaxe et des habitudes calmes ; Images responsives et Breakpoints approfondissent la boîte à outils ensuite.

Boîte à outils des media queries

📊 Media queries en un coup d’œil

Pièce Rôle au quotidien
@media Ouvre un bloc CSS conditionnel
Caractéristique média (min-width, max-width, …) Le test que le navigateur évalue
and Exige que chaque caractéristique listée corresponde
Requêtes séparées par des virgules Logique ou — toute liste qui correspond s’applique
Jeu de règles dans { } Styles actifs seulement tant que la requête correspond
Type de média (screen, print) Filtre optionnel du support de sortie

Sans requêtes, chaque règle est « toujours active ». Avec elles, vous gardez une base solide (de la leçon précédente) et empilez les changements — colonnes plus larges, typo plus grande, autre navigation — seulement quand le viewport peut les porter.

Anatomie de @media

Schéma classique : caractéristique entre parenthèses, puis un bloc d’accolades avec des déclarations normales. Préférez rem ou em pour les largeurs quand c’est possible — elles suivent mieux la racine/typo que des listes de pixels appareil.

Media query min-width de base

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first avec min-width

Écrivez la mise en page étroite dans la feuille de base. Utilisez @media (min-width: …) pour ajouter des améliorations à mesure que le viewport grandit. Chaque palier doit changer une couche claire — espacement, colonnes ou navigation — pas réécrire toute la page à chaque étape.

Amélioration mobile-first

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first avec max-width

Si la base est une mise en page large, @media (max-width: …) resserre les styles sous un seuil — empiler les colonnes, réduire le padding, simplifier le chrome. Restez cohérent dans le projet : ne basculez pas sans raison entre piles purement min-width et purement max-width.

Resserrage desktop-first

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Combiner des caractéristiques avec and

Chaînez les caractéristiques pour que toutes doivent correspondre. Utile pour les plages (min et max ensemble) ou pour coupler la largeur à une autre caractéristique. Une virgule entre listes @media entières signifie ou.

Plage avec and

css 
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Au-delà de la largeur — impression (et extras calmes)

La largeur est l’outil du quotidien. Des types comme print masquent le chrome pour le papier. Les préférences (par ex. prefers-reduced-motion) relèvent du poli d’accessibilité — utilisez-les avec parcimonie ici ; Breakpoints organise la stratégie, et Accessibilité couvre le mouvement plus tard.

Styles d’impression simples

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Une habitude calme de breakpoints

Choisissez une courte liste de largeurs nommées qui collent aux points de tension de votre mise en page — pas à chaque modèle de téléphone. Documentez-les (par ex. « la nav se replie sous 48rem »). Préférez une base fluide + peu de requêtes à une forêt de règles par appareil. Les leçons suivantes couvrent les images et un plan de breakpoints plus complet.

À vous de jouer

  1. Prenez une nav empilée et ajoutez un @media (min-width: …) qui la passe en flex.
  2. Réécrivez la même idée avec un resserrage desktop-first en max-width — remarquez la différence dans les styles de base.
  3. Ajoutez une requête de plage avec min-width et max-width pour une bande deux colonnes seulement.
  4. Masquez une bannière décorative avec @media print.
  5. Écrivez trois breakpoints nommés pour votre page d’exercice — gardez la liste courte.

Erreurs fréquentes

  • Une requête distincte pour chaque marque d’appareil au lieu des points de tension de layout
  • Oublier le } fermant, si bien que le CSS suivant disparaît dans la requête
  • Mélanger au hasard piles min-width et max-width jusqu’à ce que la cascade se combatte elle-même
  • S’appuyer uniquement sur les requêtes en ignorant conteneurs fluides et unités relatives du Design responsive
  • Déverser ici un long catalogue de breakpoints — ce métier continue dans Breakpoints ; les images dans Images responsives

Résumé

  • Les media queries encapsulent le CSS pour qu’il ne s’applique que lorsque les conditions correspondent
  • min-width enrichit vers le haut (mobile-first) ; max-width resserre vers le bas (desktop-first)
  • and exige toutes les caractéristiques ; les virgules entre requêtes agissent comme ou
  • Peu de breakpoints nommés, liés à de vrais besoins de layout
  • Suite : Images responsives — des médias qui mettent à l’échelle sans casser la colonne

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 55 de 62
Css Tutoriel