Generador de CSS Clamp
Opciones de CSS Clamp
Vista previa en vivo
Acerca del generador de CSS Clamp
CSS `clamp()` le permite definir un valor mínimo, un valor preferido flexible y un valor máximo en una sola expresión. Es especialmente útil para tipografía fluida y espaciado responsivo.
Este generador calcula una expresión `clamp()` a partir de sus tamaños mínimo y máximo y del rango de viewport en el que el valor debe escalar.
Cómo utilizar esta herramienta
- Elija la propiedad CSS que desea generar.
- Establezca el tamaño mínimo y máximo.
- Establezca el rango de la ventana gráfica donde debe escalarse el valor.
- Copie el valor `clamp()` o la regla CSS completa.
Consejos
- Utilice `clamp()` para títulos que deban escalar suavemente entre móvil y escritorio.
- Utilice `clamp()` para padding o gap y así evitar demasiadas reglas de breakpoint.
- Mantenga el viewport mínimo por debajo del viewport máximo.
Comprobaciones de CSS clamp() antes de publicar valores fluidos
Una fórmula fluida necesita límites útiles, un rango de viewport predecible y validación en tamaños intermedios.
Define límites reales
Elige mínimo y máximo según el diseño sin extrapolar fuera de tamaños legibles o utilizables.
Comprueba el valor preferido
Verifica que los coeficientes rem y viewport producen los extremos previstos y no invierten el crecimiento.
Prueba anchos intermedios
Revisa móviles, tablets, portátiles, pantallas anchas, zoom y traducciones largas, no solo los dos extremos.
Conserva la accesibilidad
Usa unidades relativas cuando corresponda y confirma que el texto responde al zoom y tamaño de fuente del usuario.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.