Unités de requête de conteneur : cqw et cqh
Dimensionnez les éléments par rapport à leur conteneur de requête à l’aide de cqw, cqh et des unités de conteneur associées.
Unités de requête de conteneur : cqw et cqh est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Unités de requête de conteneur
CSS fournit des unités relatives au conteneur qui dimensionnent les valeurs sous forme de pourcentages des dimensions du conteneur interrogé, comme les unités de fenêtre d’affichage (vw/vh), mais par rapport au conteneur du composant.
cqw — Largeur de requête de conteneur
1cqw = 1 % de la dimension en ligne du conteneur (la largeur dans une écriture horizontale). Mettez à l’échelle la typographie et les espacements par rapport au conteneur du composant.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — Hauteur de requête de conteneur
1cqh = 1 % de la dimension de bloc du conteneur (la hauteur). Nécessite container-type: size, et pas seulement inline-size.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — Dimension en ligne du conteneur
cqi est un alias de cqw dans une écriture horizontale : il fait précisément référence à la dimension en ligne, sans être lié à l’horizontale.
cqb — Dimension de bloc du conteneur
cqb est comparable à cqh, mais dépend de la dimension : il fait référence à la dimension de bloc quel que soit le mode d’écriture.
cqmin et cqmax
cqmin = 1 % de la plus petite dimension du conteneur. cqmax = 1 % de la plus grande. Ces unités sont analogues à vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Typographie fluide dans les composants
Les unités de conteneur permettent une typographie fluide véritablement limitée au composant :
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Quand utiliser les unités de conteneur
Utilisez les unités de conteneur lorsque :
- Le texte d’un composant doit être mis à l’échelle en fonction de sa largeur
- Les espacements internes d’un composant doivent être proportionnels à sa taille
- Vous souhaitez une conception fluide au niveau du composant, indépendante de la fenêtre d’affichage
Unités de conteneur et unités de fenêtre d’affichage
La différence essentielle est la suivante : les unités de fenêtre d’affichage (vw, vh) font référence à la fenêtre d’affichage du navigateur. Les unités de conteneur (cqw, cqh) font référence au conteneur de requête le plus proche. Les composants deviennent ainsi réellement portables : le même composant conserve des proportions correctes dans une barre latérale de 300 px comme dans une zone principale de 900 px.
Obligatoire : container-type
Les unités de conteneur ne fonctionnent que lorsqu’un ancêtre possède un container-type. En son absence, l’unité de requête de conteneur utilise comme solution de repli la petite unité de fenêtre d’affichage (svw/svh).
Modèle pratique
Un composant complet utilisant les unités de conteneur :
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
Vérification rapide
Que produit font-size: 5cqw dans un composant situé dans un conteneur de 400 px de large ?
Récapitulatif
Les unités de requête de conteneur (cqw, cqh, cqi, cqb, cqmin, cqmax) dimensionnent les valeurs par rapport au conteneur interrogé plutôt qu’à la fenêtre d’affichage. Utilisez cqw pour une typographie fluide qui s’adapte à la largeur du composant. Ces unités nécessitent un ancêtre container-type pour fonctionner ; sinon, elles utilisent comme solution de repli les unités de fenêtre d’affichage.
Questions Fréquemment Posées
La leçon « Unités de requête de conteneur : cqw et cqh » est-elle gratuite ?
Oui — le texte complet de « Unités de requête de conteneur : cqw et cqh » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Unités de requête de conteneur : cqw et cqh » ?
Dimensionnez les éléments par rapport à leur conteneur de requête à l’aide de cqw, cqh et des unités de conteneur associées. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Unités de requête de conteneur : cqw et cqh » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- container-type et container-name
- Règles @container et points d’arrêt
- Unités de requête de conteneur : cqw et cqh
- Requêtes de conteneur ou requêtes média