Generador de CSS clamp()

Generador de CSS clamp(): tamaños de letra y espaciado fluidos | We.Inc

Generador de CSS clamp() gratis. Define un tamaño mínimo y uno máximo y los anchos de pantalla entre ambos para obtener CSS de font-size o espaciado fluido que escala con suavidad.

Generador de CSS clamp()

Indica un tamaño para pantallas pequeñas, otro para pantallas grandes y los anchos de pantalla donde se aplica cada uno, y obtén una sola línea clamp() que crece con suavidad entre ellos. Úsala para títulos, texto, padding y gaps, de modo que el diseño escale con la pantalla sin una pila de media queries.

Introduce el tamaño más pequeño que quieres, en píxeles, y el ancho de pantalla donde debe aplicarse (a menudo 320 o 375 píxeles en móviles).
Introduce el tamaño más grande y el ancho de pantalla donde debe dejar de crecer (a menudo de 1200 a 1440 píxeles).
La herramienta calcula la recta entre esos dos puntos y la escribe como rem más vw dentro de clamp().
Copia la línea de CSS en tu hoja de estilos. Cambia el nombre de la propiedad si estás dimensionando padding, margin o gap en lugar de texto.

Conserva una parte en rem en el valor central. Un tamaño hecho solo de vw ignora el ajuste de tamaño de letra del navegador del visitante, y el zoom de texto deja de funcionar; mezclar rem y vw mantiene el zoom.
No dejes que el texto normal baje de 16 píxeles en móviles. El tamaño fluido es más útil en títulos, donde la diferencia entre el tamaño en móvil y en escritorio es grande.
Usa los mismos dos anchos de pantalla para todos los clamp() de un sitio. Así todos los tamaños empiezan y dejan de crecer a la vez, y las proporciones del diseño se mantienen estables.
Si tu sitio cambia el tamaño de letra raíz de 16 píxeles, ajusta la casilla del tamaño raíz para que coincida, o cada valor en rem se desviará en la misma proporción.

Preguntas frecuentes

¿Cómo funciona CSS clamp()?

clamp(MIN, PREFERIDO, MAX) usa el valor preferido, pero nunca baja de MIN ni supera MAX. Con clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), el texto mide 16 píxeles en pantallas estrechas, 24 píxeles en pantallas anchas y crece en línea recta entre ambas.

¿Qué fórmula hay detrás del valor central?

La pendiente es (tamaño máximo menos tamaño mínimo) dividido entre (ancho máximo menos ancho mínimo). La parte en vw es la pendiente por 100. La parte fija es el tamaño mínimo menos la pendiente por el ancho mínimo, dividido después entre el tamaño de letra raíz para pasarlo a rem. Para 16 a 24 píxeles entre pantallas de 320 y 1280 píxeles: pendiente = 8 / 960 = 0.008333, así que 0.8333vw; parte fija = 16 menos 2.6667 = 13.3333 píxeles, que son 0.8333rem.

¿clamp() funciona en todos los navegadores?

Sí. Todas las versiones actuales de Chrome, Edge, Firefox y Safari admiten clamp(). Solo los navegadores con varios años de retraso lo ignoran, y usan el tamaño que hayas definido antes en el CSS.

¿Puedo hacer que algo se reduzca cuando la pantalla es más ancha?

Sí. Introduce un tamaño mayor para la pantalla pequeña que para la grande. La pendiente pasa a ser negativa y la herramienta sigue poniendo el tamaño menor primero dentro de clamp(), como exige la función.

¿Debo usar clamp() también para el espaciado?

Funciona bien para el padding de secciones y los gaps de cuadrícula, que suelen verse demasiado grandes en móviles y demasiado justos en pantallas anchas. Usa los mismos anchos de pantalla que para la tipografía, para que espaciado y texto escalen juntos.

Por qué los tamaños fluidos necesitan dos puntos de anclaje

Un tamaño fluido es una recta trazada entre dos puntos: el tamaño que quieres en un ancho de pantalla pequeño y el que quieres en uno grande. clamp() impide después que la recta se pase de cualquiera de los extremos. Elegir bien esos dos puntos importa más que los números exactos: toma el ancho de móvil más estrecho para el que diseñas y el ancho donde tu columna de contenido deja de ensancharse.
Si el anclaje grande está mucho más allá de tu columna de contenido, el texto sigue creciendo en monitores grandes cuando el diseño ya no se ensancha, y los títulos empiezan a verse desproporcionados junto a una columna de ancho fijo. Hacer coincidir el anclaje grande con el ancho de tu contenedor lo evita.

Accesibilidad y zoom

Los navegadores permiten aumentar el tamaño de letra predeterminado, y muchas personas con baja visión dependen de ello. Un tamaño escrito solo en unidades vw ignora por completo ese ajuste. La parte en rem del valor central es la que mantiene un tamaño fluido sensible a la elección del visitante, y por eso esta herramienta escribe siempre la parte fija en rem.
Comprueba el resultado ampliando la página al 200 por ciento. El texto escrito con clamp() debería seguir creciendo. Si un título apenas cambia, la parte en vw pesa demasiado frente a la parte en rem; reduce la diferencia entre el tamaño mínimo y el máximo y vuelve a probar.

Propiedad CSS

Tamaño mínimo

Tamaño máximo

Ancho de pantalla para el tamaño mínimo

Ancho de pantalla para el tamaño máximo

Tamaño de letra raíz

Crecimiento por cada 100px de pantalla

Parte fija

El ancho de pantalla del tamaño máximo debe ser mayor que el del tamaño mínimo.

Generador de CSS clamp()