Saltar ao contido principal
LibraTool logoLibraTool

Xerador de CSS clamp() de balde

Xera un valor CSS clamp() fluído para tipografía e espazado adaptable. Establece o tamaño mínimo/máximo e o rango de ventá, ve una previsualización en directo e copia o CSS nunha liña.

Funciona sen conexión unha vez cargado
Unidade de saída:
Valor CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Clase de Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px de ancho → 21.9px
Aa 22px

Tamaño renderizado en distintos viewports

375px de anchoAa 16px
908px de anchoAa 24px
1440px de anchoAa 32px

clamp(min, preferred, max) escala un valor de forma fluída co viewport e logo bloquéase no mínimo e máximo. Substitúe pilas de media queries para tipografía, espazado e anchos cunha soa liña.

Usos habituais

  • Crea Tipografía Responsiva FluidaEscala tamaños de fonte sen sove entre móbil e desktop cunha liña.
  • Marxes Fluidos e EnchidoFai que o espazo da sección crezca coa xanela en lugar de saltar nos puntos de corte.
  • Substitúe Consultas Multimedia con clamp()Colapsa pilas de omisións de punto de ruptura nunha única valor fluida.
  • Constrúe unha Escala de Tipo FluidaXenera pasos de clamp() coherentes para a escala de tipo do sistema de deseño.
  • Encabezados Heroe e Pantalla FluidaFai que os grandes titulares da páxina de destino escalen dramaticamente pero con seguridade.

Como funciona

Esta ferramenta calcula valores clamp() de CSS usando unha fórmula de interpolación lineal escrita a man — sen bibliotecas, sen viaxes de ida e volta ao servidor. Introduces dous tamaños e dous anchos de viewport; a matemática execútase ao instante no teu navegador e produce unha expresión clamp() lista para pegar cun valor preferido baseado en vw que escala o teu tipo ou espazamento suavemente entre eses puntos de quebra.

  1. 1
    Cálculo da pendente lineal
    A ferramenta calcula unha pendente píxel a píxel: (tamañoMax - tamañoMin) / (viewportMax - viewportMin). Esta pendente convértese despois a unidades vw multiplicándoa por 100, que é o núcleo de como funciona o escalado relativo ao viewport en CSS.
  2. 2
    Derivación do intercepto
    Calcúlase un desprazamento de intercepto (en px ou rem) para que a función lineal acade exactamente o teu tamaño mínimo no viewport mínimo. Xuntos, a pendente e o intercepto forman o valor preferido dentro de clamp() — a parte que realmente escala.
  3. 3
    Conversión de unidades e formato de saída
    Se escolles saída en rem, cada valor en píxeles divídese polo tamaño de fonte raíz configurado (16px por defecto) antes de escribirse na cadea clamp(). Tamén se produce unha clase de valor arbitrario de Tailwind correspondente, cos espazos substituídos por guións baixos segundo a sintaxe de Tailwind.
  4. 4
    Vista previa en directo con control deslizante de viewport
    Un control deslizante de rango permíteche desprazarte de 320px a 1920px de ancho. En cada posición, a mesma fórmula de pendente e intercepto avalía o tamaño limitado en tempo real e renderiza texto de mostra a ese tamaño de píxel calculado, para que poidas ver o comportamento de escalado antes de copiar nada.

Ferramentas relacionadas

🟦

Xerador de Grid CSS

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Próbao
📐

Cal é a resolución da miña pantalla

Ve a resolución da túa pantalla en píxeles CSS e reais, tamaño da xanela, proporción de píxeles, profundidade de cor, HDR, soporte táctil e taxa de refresco, e cópiao todo.

Próbao
Tendencias
✍️

Creador de Sinaturas

Debuxa unha sinatura co rato, dedo, ou lapis dixital, ou escribe o teu nome nun tipo de letra manuscrito, e despois expórtaa como PNG ou SVG transparente.

Próbao

Preguntas frecuentes