Generador de clamp() CSS - Tipografía y Espaciado Fluidos
Generador de clamp() CSS
Tamaños de texto fluidos que escalan entre dos anchos de pantalla
Fluido sin Media Queries
Una línea de CSS sustituye a un montón de reglas por punto de corte.
Compatible con el Zoom
Usa rem más vw y avisa si el rango podría impedir que el texto llegue al 200 % de zoom.
Vista Previa
Mueva el control de ventana para ver el cambio de tamaño, con una tabla de anchos habituales.
Privado
Todo se ejecuta en su navegador; nada de lo que pegue se sube.
Cómo se Construye el Valor clamp()
clamp(MÍN, PREFERIDO, MÁX) usa el valor preferido sin bajar nunca de MÍN ni superar MÁX. Para un tamaño que crece linealmente de 16px con una ventana de 360px a 24px con 1280px, la pendiente es (24 − 16) / (1280 − 360) = 0,8696px por px de ancho, es decir 0,8696vw, y la recta corta el ancho cero en 12,87px = 0,8043rem. El resultado es clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem).
Mantener una parte en rem en el valor preferido es importante para la accesibilidad: las unidades vw ignoran el zoom del navegador, así que un texto solo en vw no crece cuando alguien amplía. Como regla general, mantenga el tamaño máximo por debajo de 2,5 veces el mínimo. La misma técnica sirve para espaciados, huecos y márgenes internos: cambie el nombre de la propiedad y los tamaños.
Puntos Clave
- rem + vw: Mezclar unidades mantiene el zoom.
- Relación menor de 2,5: Rangos mayores pueden romper el zoom de texto al 200 %.
- No solo fuentes: Úselo también para márgenes y huecos.