UUUP Tools

Herramientas de diseño

Generador de clamp CSS — Tamaños fluidos adaptables

A partir de anchos de viewport mínimo/máximo y un rango de tamaño objetivo, calcula una fórmula clamp() para tamaños de fuente fluidos, espaciado y otras longitudes que escalan con el viewport.

Cambio rápido→Conversor de unidades CSS
CSSclampAdaptable
Cambio rápido:Conversor de unidades CSSRegla de píxeles

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

  • Genera tipografía de cuerpo que escala con el viewport
  • Define rangos mínimo/máximo en rem para titulares
  • Sustituye parte del espaciado por media queries con clamp

Cómo usar

  1. Define los anchos de viewport mínimo y máximo
  2. Define los tamaños mínimo/máximo correspondientes (rem) y el tamaño de fuente raíz
  3. Copia la fórmula clamp()

Entrada y salida de ejemplo

Condiciones

Viewport 320–1200px, tamaño 1–2.5rem, raíz 16px

CSS

clamp(1rem, 0.45rem + 2.72vw, 2.5rem)

FAQ

¿Cómo se calcula la fórmula?

Dentro del rango de viewport dado, una pendiente lineal mapea el tamaño de mínimo a máximo y luego clamp(min, preferred, max) acota los extremos.

¿Solo sirve para tamaños de fuente?

No. Cualquier longitud que expreses en rangos rem funciona: tamaño de fuente, espaciado, ancho y similares.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Conversor de unidades CSS

Conversor de unidades CSS — px, rem, em, vw

Disponible

Convierte entre px, rem, em, pt, vw, vh y %. Personaliza el tamaño de fuente raíz, el tamaño de fuente del contenedor padre y el tamaño de la ventana gráfica para trabajos adaptables y entregas de diseño a código.

CSS Unidades Conversión
Abrir herramienta

Regla de píxeles

Regla de píxeles — Tamaño de pantalla y marcas de medida

Disponible

Dibuja una regla de píxeles horizontal o vertical en la página. Ajusta la longitud y el espaciado de las marcas y consulta el tamaño de la ventana y la relación de píxeles del dispositivo para comparar medidas en píxeles CSS con maquetaciones y modelos de diseño.

Píxeles Regla Medir
Abrir herramienta