Cómo usar: Calculadora de abrazaderas
- Introduce el tamaño mínimo y máximo (en px o rem) y los anchos de la ventana de visualización en los que debe empezar y terminar el escalado.
- Copia el
clamp()valor: elige entre rem (recomendado para la accesibilidad) o px. - Arrastra el control deslizante de la ventana de visualización para ver el tamaño exacto con cualquier ancho de pantalla y lee los cálculos paso a paso que aparecen a continuación.
- Genera una escala completa de tipos de fluidos o una escala espacial y cópiala como propiedades personalizadas de CSS.
¿Qué es la función `clamp()` de CSS?
clamp(MIN, PREFERRED, MAX) Devuelve el valor preferido, pero nunca menor que MIN ni mayor que MAX. Con un valor preferido que crece con la ventana gráfica —como 0.8239rem + 0.7512vw —, consigues tamaños de fuente y espaciados fluidos que se adaptan sin problemas entre el tamaño de móvil y el de ordenador, sin tener que apilar un montón de consultas de medios. Funciona en todos los navegadores modernos.
La fórmula, paso a paso
El tamaño fluido es una línea recta entre dos puntos: (ventana gráfica mínima, tamaño mínimo) y (ventana gráfica máxima, tamaño máximo). Para 16 px a 375 px y 24 px a 1440 px:
- Pendiente = (24 − 16) ÷ (1440 − 375) = 0,007512: el tamaño aumenta 0,0075 px por cada píxel de la ventana de visualización.
- parte vw = pendiente × 100 =
0.7512vw, ya que 1 vw es el 1 % del ancho de la ventana de visualización. - Punto de intersección = 16 − 0,007512 × 375 = 13,183 px =
0.8239remcon una raíz de 16 píxeles. - Resultado:
clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). En una ventana gráfica de 768 px, eso son 13,183 + 0,007512 × 768 ≈ 18,95 px.
¿Por qué mezclar rem y vw?
Un tamaño compuesto únicamente por vw ignora el zoom del navegador y el tamaño de fuente predeterminado del usuario, lo que puede hacer que no cumpla con WCAG 1.4.4 (Redimensionar texto). Mantener un rem valor intermedio hace que el valor siga respondiendo cuando alguien amplía la imagen o establece una fuente predeterminada más grande. Como regla general, si el máximo no supera 2,5 veces el mínimo, el texto seguirá siendo legible con un zoom del 200 %; la calculadora señala los rangos que superan este límite.
Escalas fluidas de tipo y espacio
En lugar de calcular cada título por separado, define una escala modular: cada paso multiplica la base por una proporción. Una relación menor en el móvil (p. ej., 1,2, tercera menor) y otra mayor en el ordenador (p. ej., 1,25, tercera mayor) hace que los títulos destaquen en pantallas grandes sin que resulten abrumadores en los móviles —el enfoque que popularizó Utopia. La escala espacial multiplica la misma base (0,25×, 0,5×, 1×, 1,5×, 2×…) para que los rellenos y los espacios crezcan al mismo ritmo que el texto.
Cómo usar clamp() en Webflow
- Directamente en el panel «Estilo»: Webflow admite funciones matemáticas de CSS en los campos de tamaño. Haz clic en «Tamaño de fuente», «Relleno» o «Espacio», pega el
clamp(…)valor y pulsa Intro. - Como variables: crea una variable de tamaño para cada paso (p. ej., «Paso 0», «Espacio M») en el panel «Variables», pega el valor de clamp() y, a continuación, aplica la variable a las fuentes y los espacios en todas las clases: cámbiala una vez y se actualizará en todas partes.
- Mediante código personalizado: pega el
:root { … }dentro de una<style>etiqueta en Configuración del sitio → Código personalizado → Código del encabezado y, a continuación, escribevar(--step-0)en cualquier campo de tamaño. - Los espacios flexibles, como
clamp(2rem, …, 4rem)evitan que las secciones parezcan demasiado grandes en las tabletas: usa el chip de inicio rápido «Espaciado».
¿Quieres convertir primero las especificaciones de diseño? El conversor de PX a REM transforma los valores en píxeles a rem.
También se busca como: calculadora de respuesta a los líquidos, tamaño de fuente de fluid root, css clamp, tipografía fluida, escala de tipo fluido, tamaño de letra adaptativo, vw rem no, utopía.
Herramientas que combinan con: Calculadora de abrazaderas
- Type Scale Generator — Pick a base font size and a ratio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — and get a harmonious set of font sizes for headings and body text.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Convertidor de unidades — Convierte entre unidades métricas, imperiales y técnicas en diez categorías, con un conversor bidireccional y una tabla que muestra todas las unidades a la vez.
Preguntas frecuentes
¿Cuáles son los valores mínimos y máximos recomendados para el tamaño de la ventana gráfica en la tipografía fluida?
¿Debería usar «rem» o «px» en el resultado de «clamp()»?
¿Puede la función `clamp()` hacer que un valor se reduzca en pantallas más grandes?
clamp(), tal y como exige CSS.¿Funciona clamp() en Webflow?
var().¿Por qué no cambia el tamaño de la fuente adaptativa cuando cambio el tamaño de la ventana del navegador?
vw se incluye el ancho de la barra de desplazamiento vertical en el ordenador.