Tipografía y espacio fluidos en CSS

clamp escala un valor con el viewport entre un piso y un techo.

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  line-height: 1.1;
}

.section {
  padding-block: clamp(2rem, 6vw, 6rem);
}

.wrapper {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

Cómo funciona

1. clamp(min, preferred, max) nunca sale de los límites.
2. Un término en vw en el medio es lo que lo vuelve fluido.
3. El mismo truco funciona para el padding y los gaps.

Palabras clave y builtins usados aquí

• rem
• vw
• width

El intento, en números

Líneas

13

Caracteres a escribir

196

Tokens

64

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 45 segundos.

Escribe este fragmento

Paso 2 de 4 en Responsivo; paso 2 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →