CSS Academy · Leçon

Motifs Min-Width et Max-Width

Limitez les éléments avec min-width et max-width afin d’obtenir des largeurs de lecture confortables.

Motifs Min-Width et Max-Width 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.

Présentation de min-width et max-width

min-width définit la taille minimale à laquelle un élément peut se réduire. max-width définit sa limite supérieure. Ensemble, ils créent des éléments adaptatifs qui s’ajustent dans une plage définie.

max-width pour un contenu lisible

Les longues lignes de texte sont difficiles à lire. Limitez les conteneurs de texte à une longueur de ligne confortable :

<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>

max-width pour des conteneurs centrés

Le modèle classique du conteneur centré à largeur maximale :

<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>

min-width pour empêcher la réduction

min-width empêche les éléments de se réduire en dessous d’une taille utilisable :

<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
  <tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>

Fluidité entre deux limites

La combinaison de width, min-width et max-width crée un élément fluide encadré par des limites absolues :

<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>

max-width: 100% pour des images adaptatives

Empêchez les images de dépasser leur conteneur :

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />

min() pour définir max-width sans variable CSS

Utilisez min() en une seule ligne pour obtenir une largeur fluide avec une limite maximale :

<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>

min-content et max-content comme valeurs

Utilisez les mots-clés de dimensionnement intrinsèque comme valeurs :

<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>

Colonnes de tableau avec min-width

Empêchez les cellules du tableau de devenir illisiblement étroites :

<table style="border-collapse:collapse;width:100%;">
  <tr>
    <td style="border:1px solid #ccc;">Short</td>
    <td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
  </tr>
</table>

Plages de largeur des requêtes média

min-width et max-width servent également dans les requêtes média à définir des points de rupture adaptatifs :

<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>

Conteneur avec marge intérieure asymétrique

Sur les écrans très larges, centrez le contenu tout en conservant un espace suffisant près des bords :

<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>

Vérification rapide

Quelle règle CSS garantit que les images tiennent toujours dans leur conteneur parent sans être déformées ?

Récapitulatif

max-width limite la taille des éléments pour garantir un contenu lisible et des conteneurs centrés. min-width empêche les éléments de se réduire en dessous de dimensions utilisables. Les combiner crée des éléments fluides qui s’ajustent entre des limites définies. Ajoutez toujours max-width: 100%; height: auto aux images pour obtenir un comportement adaptatif.

Questions Fréquemment Posées

La leçon « Motifs Min-Width et Max-Width » est-elle gratuite ?

Oui — le texte complet de « Motifs Min-Width et Max-Width » 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 « Motifs Min-Width et Max-Width » ?

Limitez les éléments avec min-width et max-width afin d’obtenir des largeurs de lecture confortables. 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 « Motifs Min-Width et Max-Width » ?

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

← Retour à CSS Academy