Cours CSS / media queries et points de rupture adaptés au contenu
Les requêtes média appliquent du CSS lorsque les conditions environnementales spécifiées sont satisfaites, comme un seuil de largeur de fenêtre. Choisissez un point de rupture où le contenu réel nécessite une mise en page différente, et prenez en compte à la fois la largeur du composant et l'espacement environnant.
Combinez les styles de base et les styles conditionnels
Les règles en dehors des media queries fournissent la base. Lorsqu'une condition est remplie, ses déclarations rejoignent la cascade ; elles ne suppriment pas les déclarations de base non liées. Avant d'ajouter un point de rupture (breakpoint), vérifiez si une taille fluide peut accueillir naturellement le contenu. Voir Dimensions fluides avec min(), max-width et clamp().
.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Ici, nous avons utilisé le même sélecteur et placé d'abord la disposition pour les fenêtres étroites, de sorte que la déclaration conditionnelle suivante écrase cette propriété. Vous ne devez pas généraliser que « le code ci-dessous l'emportera toujours » dans tous les cas. Comparez l'ordre des déclarations lorsque l'importance, la priorité de la couche de cascade et du sélecteur, etc. sont les mêmes. Si les conditions sont vraies mais qu'il n'y a aucun changement, vérifiez si une ligne barrée apparaît dans d'autres règles dans les outils de développement.
Calculer les points de rupture à partir des exigences de la carte
Tout d'abord, vérifiez à quel point une seule carte commence à devenir difficile à lire. En pratique, l'objectif de largeur minimale, incluant la bordure et le padding de la carte, est fixé à 16rem. Il ne s'agit pas d'une valeur standard qui conviendra à tous les sites, mais c'est une exigence de conception pour cet exemple. Vous devriez essayer d'inclure un titre et une description longs et les modifier pour correspondre à la police et au contenu réels.
La largeur de contenu requise pour deux colonnes est de 33rem, ce qui correspond à 16rem×2 plus 1rem d'espacement entre les colonnes. Si le padding gauche et droit du texte est de 1rem chacun, la largeur de fenêtre requise est de 35rem. Par conséquent, dans l’exemple complet ci-dessous, les deux colonnes commencent à 35rem. Le premier extrait à 33rem illustre uniquement la syntaxe, sans ajouter le padding extérieur. Trois colonnes font 16rem×3 + espacement 1rem×2 + padding extérieur total à gauche et à droite 2rem. 52rem sont requis.
| Colonnes | total des cartes | Somme de l'espacement entre les colonnes | padding extérieur total à gauche et à droite | Point de rupture |
|---|---|---|---|---|
| 1 colonne | S’adapte à la largeur disponible | 0 | 2rem | Style de base |
| 2 colonnes | 32rem | 1rem | 2rem | 35rem |
| 3 colonnes | 48rem | 2rem | 2rem | 52rem |
La raison pour laquelle nous n'ajoutons pas l'espace à l'intérieur de la carte dans le calcul du tableau est que nous l'avons déjà inclus dans notre objectif de largeur minimale de 16rem. Inversement, si le contenu principal partage l’espace avec une barre latérale, il est difficile de garantir l'espace de la carte uniquement avec la fenêtre d'affichage. Dans ce cas, envisagez de recalculer les conditions de mise en page externe ou de déterminer la mise en page interne de la partie en utilisant les Requêtes de conteneur CSS pour composants réutilisables.
Comprendre rem et les limites inclusives
min-width est valide lorsqu'il est égal ou supérieur à la largeur spécifiée, et max-width est valide lorsqu'il est égal ou inférieur à la largeur spécifiée. Si votre taille de police initiale est de 16px, 35rem correspond à 560px et 52rem correspond à 832px. Nous ne décrivons pas toujours le rem comme une valeur px fixe, car la valeur convertie peut varier en fonction des paramètres de police initiaux de l'utilisateur ou du navigateur.
La longueur relative dans les media queries utilise la valeur initiale, et non la taille de police remplacée par le CSS de la page. Par exemple, ajouter html { font-size: 32px; } au CSS ne transforme pas automatiquement la condition de 35rem en condition de 1120px. Une distinction doit être faite entre les changements de taille en rem du texte et les changements des conditions dans les media queries. Ce principe est décrit dans la spécification CSS Media Query basée sur les unités.
/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }Comme montré ci-dessus, les conditions min et max avec la même limite se chevauchent aux points correspondants. Vous pouvez réduire ce problème en ajoutant progressivement des conditions de largeur par défaut et de largeur minimale. Les conditions à deux colonnes et trois colonnes sont également vraies sur les grands écrans, mais utiliser le même sélecteur et les mêmes propriétés que dans l'exemple complet et écrire la règle des trois colonnes ensuite produit l'étape souhaitée.
Étendre d'une à deux puis trois colonnes
Enregistrez-le sous un fichier media-breakpoint.html et ouvrez-le dans votre navigateur. Aucun fichier externe n'est nécessaire. L’exemple comprend trois cartes avec des titres, des liens et un identifiant long pour observer le comportement du contenu.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>Désactiver la largeur minimale pour minmax(0, 1fr) et les cartes empêche les colonnes de dépasser l'écran à cause d'un contenu long. Cependant, le but de cet exemple est de réduire le nombre de colonnes plutôt que de forcer uniquement les lettres à s'adapter. À la largeur maximale du corps de 70rem, les colonnes ne continuent pas à s'étendre indéfiniment, mais trois cartes partagent l'espace restant.
Testez immédiatement autour de chaque point de rupture
- Comparez 559px, 560px et 561px dans un environnement avec une taille de police initiale de 16px. 559px doit être 1 colonne, 560px doit être 2 colonnes.
- Comparez 831px, 832px et 833px. 831px doit être 2 colonnes, 832px doit être 3 colonnes. Assurez-vous que la largeur de la carte est au moins de 16rem même lorsque vous atteignez la jonction exacte.
- Changez uniquement les points de rupture à deux colonnes de 35rem à 30rem. À 480px, observez si la largeur de la carte devient plus petite que la cible et si le nombre de lignes de titre augmente, puis restaurez à 35rem.
- Testez séparément une taille de police par défaut augmentée dans le navigateur et une taille modifiée uniquement avec CSS sur html. Notez la largeur et le nombre de colonnes dans chaque cas. Modifier la racine CSS peut agrandir les cartes exprimées en rem sans déplacer le seuil de la media query : vérifiez alors si les exigences de largeur restent satisfaites.
Les media queries peuvent tester l'orientation, les capacités d'entrée et une préférence pour un mouvement réduit ainsi que la largeur. Un écran étroit ne signifie pas nécessairement un appareil tactile, et un écran large ne garantit pas une souris. Complétez d'abord la mise en page basée sur la largeur, puis ajoutez d'autres conditions lorsque la fonctionnalité les nécessite. Le guide MDN sur l'utilisation des media queries explique leur syntaxe et les conditions d'environnement.
