Aufklemmkarte

In dieser Demo legen Sie die Breite mit clamp() so fest: width: clamp(<min>, <actual>, <max>).

Damit werden eine absolute Mindest- und Höchstgröße sowie eine tatsächliche Größe festgelegt. Mit Werten kann das so aussehen:

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

Die Mindestgröße hier beträgt 23ch oder 23 Zeichen und die maximale Größe ist 46ch mit 46 Zeichen. Einheiten für die Zeichenbreite basieren auf der Schriftgröße des Elements, insbesondere der Breite des Symbols 0. Die tatsächliche Größe beträgt 50%, also 50% der Breite des übergeordneten Elements.

Die Funktion clamp() sorgt hier dafür, dass dieses Element eine Breite von 50% behält, bis 50% entweder größer als 46ch (bei breiteren Darstellungsbereich) oder kleiner als 23ch (bei kleineren Darstellungsbereichen sind). Im Video sehen Sie, wie die Breite dieser Karte auf den gebundenen Maximalwert ansteigt und auf das gebundene Minimum abnimmt, wenn sich das übergeordnete Element dehnt und schrumpft. Sie bleibt dann im übergeordneten Element zentriert, wobei zusätzliche Properties verwendet werden, um sie zu zentrieren. Dies ermöglicht besser lesbare Layouts, da der Text nicht zu breit (über 46ch) oder zu stark zusammengepresst und schmal (weniger als 23ch) ist.

Mit dieser Technik können Sie responsive Typografie implementieren. Beispiel: font-size: clamp(1.5rem, 20vw, 3rem). In diesem Fall würde die Schriftgröße eines Anzeigentitels immer zwischen 1.5rem und 3rem liegen. Sie wird jedoch basierend auf dem tatsächlichen Wert für 20vw größer und kleiner, um sie an die Breite des Darstellungsbereichs anzupassen.

Dies ist eine großartige Methode, um die Lesbarkeit mit einem Mindest- und Höchstwert für die Größe sicherzustellen. Denken Sie jedoch daran, dass es nicht von allen modernen Browsern unterstützt wird. Stellen Sie daher sicher, dass Sie über Fallbacks verfügen und Ihre Tests durchführen.

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%;
  }