Calculadora CSS de clamp
Genera tipografía o espaciado fluidos entre límites de viewport.
Cómo usar Calculadora CSS de clamp
CSS clamp calculator creates a clamp() value that scales a font size or spacing linearly between a minimum and maximum pixel size across a viewport range. Enter both sizes and both viewport widths, which default to 16 to 32 px between 320 and 1280 px viewports, and get a calc() expression combining px and vw plus a live text preview.
- Introduce los valores solicitados en el panel de ajustes.
- Ajusta la configuración básica y abre el modo avanzado para opciones de exportación y ajuste fino. La configuración personalizada sigue activa al cerrar el panel.
- Ejecuta la calculadora CSS de clamp, revisa la salida y usa los controles disponibles para copiar o descargar.
Qué admite esta herramienta
Genera tipografía o espaciado fluidos entre límites de viewport.
- Fuente / espaciado mínimos (px)
- Range: 0 to 1000
- Fuente / espaciado máximos (px)
- Range: 0 to 1000
- Viewport mínimo (px)
- Range: 1 to 10000
- Viewport máximo (px)
- Range: 1 to 10000
Límites y procesamiento
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.
Preguntas frecuentes
How do I calculate a fluid font size with CSS clamp?
The slope is the size difference divided by the viewport difference. The middle value becomes an intercept in px plus the slope times 100 in vw, so the size reaches the minimum at the small viewport and the maximum at the large one. The calculator does this for you.
Why does the clamp calculator output px instead of rem?
All inputs and outputs are in pixels, and the middle term combines px with vw rounded to six decimals. If your design system uses rem, divide the pixel values by your root font size after copying the result.
What causes the error that maximum viewport must exceed minimum?
The maximum viewport must be larger than the minimum viewport, and the maximum size cannot be smaller than the minimum size. Equal sizes are allowed and produce a fixed value. Swap the fields if you entered them in the wrong order.
¿Dónde se procesa mi entrada?
Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.
¿Cuáles son los límites de entrada?
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.