min(), max() et clamp() pour des valeurs fluides
Limitez les valeurs entre un minimum et un maximum avec min(), max() et la notation abrégée clamp().
min(), max() et clamp() pour des valeurs fluides est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Pourquoi des fonctions de comparaison ?
Les fonctions de comparaison CSS (min(), max(), clamp()) permettent un dimensionnement adaptatif qui s’ajuste au contexte sans requêtes média, de façon plus élégante et concise que les approches fondées sur des points d’arrêt.
min() — Choisir la plus petite valeur
min(a, b, ...) évalue tous les arguments et utilise le plus petit. Le « minimum » désigne ici le résultat visuel, c’est-à-dire l’option la plus contraignante.
<div class="container">Container</div>max() — Choisir la plus grande valeur
max(a, b, ...) choisit la plus grande valeur, ce qui garantit qu’un seuil minimal est toujours respecté.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() maintient une valeur dans une plage donnée. La valeur préférée (l’argument du milieu) est généralement fluide. Les valeurs minimale et maximale fournissent des limites absolues.
<h1>Clamped Heading</h1>Échelle typographique fluide avec clamp()
Remplacez plusieurs redéfinitions selon les points d’arrêt par un seul clamp() pour chaque niveau de titre :
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Espacement fluide avec clamp()
Appliquez également un dimensionnement fluide aux espacements internes, aux marges et aux espaces entre éléments : c’est une technique essentielle de la conception « intrinsèque » :
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() comme garde-fou de largeur
Le modèle de conteneur le plus simple : il occupe toujours 90 % de la fenêtre d’affichage, sans jamais dépasser 1 200 px, au moyen d’une seule expression :
<div class="wrapper">Wrapper</div>max() pour une taille de police minimale
Veillez à ce que le texte courant ne devienne jamais trop petit dans les fenêtres d’affichage étroites :
<p class="text-body">Body text that never gets too small.</p>Imbrication de min/max/clamp
Ces fonctions peuvent être imbriquées pour exprimer des contraintes complexes :
<div class="element">Padded element</div>Fonctions de comparaison dans la grille
Utilisez min() à l’intérieur de minmax() pour définir un seuil minimal de colonne plus sûr :
<div class="grid"><div>Card</div></div>Prise en charge par les navigateurs
Les trois fonctions de comparaison sont entièrement prises en charge par les navigateurs modernes (Chrome 79+, Firefox 75+, Safari 11.1+). Aucun préfixe de fournisseur n’est nécessaire.
Vérification rapide
Un titre utilise font-size: clamp(1rem, 3vw, 2.5rem). À quelle largeur de fenêtre d’affichage 3vw est-il égal à 1rem (en supposant une racine de 16 px) ?
Récapitulatif
min() choisit la plus petite valeur (le plafond supérieur). max() choisit la plus grande (le seuil inférieur). clamp(min, preferred, max) encadre une valeur fluide. Ensemble, ces fonctions permettent une typographie et des espacements fluides sans requêtes média. Le modèle le plus puissant est clamp(1.5rem, 4vw, 3rem), qui rend automatiquement les titres adaptatifs.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « min(), max() et clamp() pour des valeurs fluides » est-elle gratuite ?
Oui — le texte complet de « min(), max() et clamp() pour des valeurs fluides » 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 « min(), max() et clamp() pour des valeurs fluides » ?
Limitez les valeurs entre un minimum et un maximum avec min(), max() et la notation abrégée clamp(). 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 2 sur 4.
Combien de temps prend la leçon « min(), max() et clamp() pour des valeurs fluides » ?
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
- calc() pour les calculs dynamiques
- min(), max() et clamp() pour des valeurs fluides
- repeat() et minmax() dans Grid
- color-mix() et syntaxe des couleurs relatives