Tarjeta de sujeción

En esta demostración, configurarás el ancho con clamp() de la siguiente manera: width: clamp(<min>, <actual>, <max>).

De esta manera, se establecen un tamaño mínimo y máximo absolutos y un tamaño real. Con valores, puede verse de la siguiente manera:

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

El tamaño mínimo es de 23ch o 23 caracteres, y el máximo es de 46ch (46 caracteres). Las unidades de ancho de caracteres se basan en el tamaño de la fuente del elemento (específicamente, el ancho del glifo 0). El tamaño "real" es del 50%, que representa el 50% del ancho principal de este elemento.

Lo que hace la función clamp() aquí es permitir que este elemento conserve un 50% de ancho hasta que un 50% sea mayor que 46ch (en viewports más amplios) o inferior a 23ch (en viewports más pequeños). En el video, mira cómo el ancho de esta tarjeta aumenta hasta su punto máximo restringido y disminuye a su mínimo restringido a medida que el elemento principal se estira y se contrae. Luego, se mantiene centrado en el elemento superior mediante propiedades adicionales para centrarlo. Esto permite diseños más legibles, ya que el texto no será demasiado ancho (sobre 46ch) ni demasiado apretado y angosto (menos de 23ch).

Puedes usar esta técnica para implementar una tipografía responsiva. Por ejemplo: font-size: clamp(1.5rem, 20vw, 3rem). En este caso, el tamaño de la fuente de un título siempre se mantendría restringido entre 1.5rem y 3rem, pero aumentaría y se reduciría según el valor real 20vw para adaptarse al ancho del viewport.

Esta es una excelente técnica para garantizar la legibilidad con un valor de tamaño mínimo y máximo, pero recuerda que no es compatible con todos los navegadores actualizados, por lo que debes asegurarte de contar con resguardos y realizar pruebas.

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