Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Media queries : points de rupture et mise en page adaptable | SovranCode

Contenu du coursCSS — Media queries · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS61 min

CSS — Media queries

Adaptez la présentation à la fenêtre et aux préférences de la personne avec les media queries. Partez d’une base flexible, puis ajoutez un point de rupture lorsque le contenu demande une autre disposition.

Une mise en page adaptable ne se résume pas à une liste de largeurs d’appareils. Partez d’une base flexible et ajoutez un point de rupture lorsque le contenu en a besoin. Si un composant doit réagir à la place que lui offre son parent plutôt qu’à toute la fenêtre, utilisez une requête de conteneur.

Distinguer la fenêtre du conteneur

Dans l’exemple ci-dessous, repérez le conteneur nommé cards et la règle @container qui modifie ses cartes. Comparez ce repère local à une règle @media fondée sur la largeur de la fenêtre, comme dans l’exemple à modifier.

.catalog { container: cards / inline-size; }
.card { display: grid; gap: 1rem; }

@container cards (min-width: 42rem) {
  .card {
    grid-template-columns: 12rem 1fr;
  }
}

Les bons réflexes

Vérifiez le contenu avec un zoom à 200%.
Ajoutez un point de rupture lorsque le contenu manque de place ou demande une autre organisation.
Pour un composant réutilisé dans plusieurs zones, envisagez une requête de conteneur lorsque son espace local doit guider sa disposition.

ATELIER CSS · ENVIRON 35 MIN

Adapter un composant à la place dont il dispose

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Commencer par une base utilisable dans peu d’espace

La disposition de base doit fonctionner avant toute condition : texte lisible, blocs dont la hauteur suit le contenu, retours à la ligne et médias limités à leur conteneur. Ajoutez un point de rupture lorsque ce contenu demande une autre organisation, plutôt qu’à une largeur associée par habitude à un appareil. Une media query teste la fenêtre ou une autre caractéristique du média. Dans une même fenêtre, une colonne latérale peut être étroite alors que la zone principale est large : la largeur de la fenêtre ne décrit donc pas toujours la place disponible pour une carte réutilisable.

Interroger un ancêtre pour adapter ses descendants

Une requête de taille demande un ancêtre défini comme conteneur avec container-type, souvent inline-size, ou avec le raccourci container. Le nom du conteneur permet de viser le bon ancêtre lorsqu’il y en a plusieurs. Le conteneur interrogé ne se met pas lui-même en forme à partir de sa propre taille : ce sont ses descendants, comme la carte, qui changent. La base doit rester utilisable si la condition ne s’applique pas. Placez le même composant dans deux parents de tailles différentes, puis testez le zoom et les textes longs pour révéler les contraintes qu’une seule capture d’écran ne montrerait pas.

Fixez max-width du catalogue à 25rem en gardant une fenêtre large. Expliquez pourquoi la carte revient à une seule colonne.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 1rem; }
.catalog { container: lessons / inline-size; max-width: 55rem; margin-inline: auto; }
.card { display: grid; gap: 1rem; border: 2px solid #254fc0; padding: 1rem; }
.visual { display: grid; place-items: center; min-height: 8rem; background: #edf2f7; font-size: 2rem; }
@container lessons (min-width: 35rem) { .card { grid-template-columns: 10rem minmax(0, 1fr); } }
</style>
</head>
<body>
<div class="catalog"><article class="card"><div class="visual" aria-hidden="true">CSS</div><div><h1>Une carte de leçon réutilisable</h1><p>La disposition suit la taille de ce conteneur. Redimensionnez l’aperçu, puis modifiez max-width du catalogue.</p></div></article></div>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 1rem; }
.catalog { container: lessons / inline-size; max-width: 55rem; margin-inline: auto; }
.card { display: grid; gap: 1rem; border: 2px solid #254fc0; padding: 1rem; }
.visual { display: grid; place-items: center; min-height: 8rem; background: #edf2f7; font-size: 2rem; }
@container lessons (min-width: 35rem) { .card { grid-template-columns: 10rem minmax(0, 1fr); } }
</style>
</head>
<body>
<div class="catalog"><article class="card"><div class="visual" aria-hidden="true">CSS</div><div><h1>Une carte de leçon réutilisable</h1><p>La disposition suit la taille de ce conteneur. Redimensionnez l’aperçu, puis modifiez max-width du catalogue.</p></div></article></div>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.card { container-type: inline-size; }
@container (min-width: 35rem) { .card { display: flex; } }

Voir la correction et son explication

.catalog { container-type: inline-size; }
@container (min-width: 35rem) { .card { display: flex; } }

La carte doit interroger un conteneur ancêtre admissible. Définissez le conteneur sur l’élément qui l’entoure, plutôt que d’attendre que la carte interroge sa propre taille.

À VOUS DE JOUER

Créer sans recopier l’exemple

Placez la même carte dans une colonne latérale étroite et une zone principale large. Utilisez une requête de conteneur pour enrichir seulement la disposition qui dispose d’assez de place.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adapter un composant à la place dont il dispose — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Adapter un composant à la place dont il dispose</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adapter un composant à la place dont il dispose — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Adapter un composant à la place dont il dispose</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

La disposition de base fonctionne sans la requête.Deux cartes peuvent avoir des dispositions différentes dans la même fenêtre.Le contenu reste disponible et lisible avec un zoom à 200%.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quelle taille une requête de conteneur examine-t-elle normalement pour adapter une carte ?Celle d’un conteneur ancêtre admissibleLa taille interrogée de la carte elle-mêmeLe nom du système d’exploitation

2. Quand faut-il ajouter un point de rupture à une disposition ?À chaque largeur associée à un nom d’appareilLorsque le contenu demande une autre organisationUniquement à 1920px

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Media queries

Distinguer la fenêtre du conteneur

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Adapter un composant à la place dont il dispose

Commencer par une base utilisable dans peu d’espace

Interroger un ancêtre pour adapter ses descendants

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris