Carte de fixation

Dans cette démonstration, vous définissez la largeur à l'aide de clamp(), comme suit: width: clamp(<min>, <actual>, <max>).

Cela permet de définir des tailles minimale et maximale absolues, ainsi qu'une taille réelle. Avec les valeurs, cela peut se présenter comme suit:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

La taille minimale est de 23ch ou 23 unités de caractères, et la taille maximale de 46ch, de 46 caractères. L'unité de largeur des caractères est basée sur la taille de police de l'élément (en particulier la largeur du glyphe 0). La taille "réelle" est de 50%, ce qui représente 50% de la largeur du parent de cet élément.

La fonction clamp() permet ici à cet élément de conserver une largeur de 50% jusqu'à 50% est supérieur à 46ch (sur les fenêtres d'affichage plus larges) ou inférieur à 23ch (sur les fenêtres d'affichage plus petites). Dans la vidéo, regardez comment la largeur de cette fiche augmente jusqu'à atteindre la limite maximale et diminue jusqu'à atteindre le point minimal lorsque le parent s'étire et se réduit. Elle reste ensuite centrée dans le parent à l'aide de propriétés supplémentaires. Les mises en page sont ainsi plus lisibles, car le texte ne sera pas trop large (au-dessus de 46ch) ni trop resserré et trop étroit (moins de 23ch).

Vous pouvez utiliser cette technique pour implémenter une typographie responsive. Exemple : font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de la police d'un titre serait toujours limitée entre 1.5rem et 3rem, mais augmenterait ou diminuerait en fonction de la valeur réelle de 20vw pour s'adapter à la largeur de la fenêtre d'affichage.

Il s'agit d'une excellente technique pour garantir la lisibilité avec une valeur de taille minimale et maximale, mais n'oubliez pas qu'elle n'est pas compatible avec tous les navigateurs récents. Par conséquent, assurez-vous de disposer de solutions de remplacement et d'effectuer vos tests.

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }