Como uma calculadora de CSS clamp calcula a inclinação vw?

Ela traça uma reta pelos seus dois pontos de âncora: inclinação = (tamanhoMáx − tamanhoMín) / (viewportMáx − viewportMín). Como 100vw é igual à largura do viewport, o coeficiente vw no valor é essa inclinação multiplicada por 100, e o intercepto rem é o que sobra quando a reta é estendida de volta até um viewport de largura zero.

Por que o termo do meio mistura rem e vw?

O valor preferido é uma reta: uma parte fixa que não depende da largura (o intercepto rem) mais uma parte que cresce com o viewport (a inclinação vw). Misturar os dois deixa o tamanho escalar suavemente entre seu mínimo e máximo em vez de saltar num breakpoint.

Devo usar px ou rem nos limites do clamp?

Limites em rem respeitam a configuração de font-size do navegador do usuário, o que é melhor para acessibilidade, então esta ferramenta gera rem por padrão. Você pode mudar a leitura para px, mas limites de clamp em rem são a escolha mais segura para dimensionar texto.

Posso usar o mesmo valor clamp() para margens e espaçamentos?

Sim. clamp() funciona para qualquer comprimento, então o valor se aplica a padding, margin, gap e faixas de grid além de font-size. Use a predefinição de espaçamento fluido como ponto de partida e ajuste os tamanhos mínimo e máximo.

Qual tamanho de fonte raiz devo digitar?

Use o que sua página define no elemento html — 16px é o padrão do navegador e o padrão da ferramenta. Se você escala a raiz em outro lugar, digite esse valor para que a saída em rem se mapeie aos pixels que você realmente vê.

Os tamanhos que eu digito são enviados para algum lugar?

Não. A Calculadora de CSS Clamp roda inteiramente no seu navegador. As larguras de viewport e os tamanhos que você digita são usados só para calcular o valor no seu dispositivo e nunca são enviados à ArrayKit.

Calculadora de CSS Clamp

Transforme um tamanho mínimo e máximo mais duas larguras de viewport em um valor CSS clamp() fluido, calculado ao vivo no seu navegador.

A Calculadora de CSS Clamp roda inteiramente no seu navegador. As larguras de viewport, os tamanhos e o tamanho de fonte raiz que você digita nunca saem do seu dispositivo e nada é enviado à ArrayKit.

Abrir o Conversor de Unidades CSS

Sobre Calculadora de CSS Clamp

A Calculadora de CSS Clamp transforma quatro números — um tamanho mínimo e máximo em pixels mais as duas larguras de viewport às quais eles se mapeiam — em um valor clamp() pronto para colar, para tipografia e espaçamento fluidos. Ela ajusta uma reta entre seus dois pontos de âncora, calcula a inclinação em vw e o intercepto em rem, e fixa o resultado no seu mínimo abaixo do viewport pequeno e no seu máximo acima do grande. Um controle deslizante de prévia ao vivo mostra o tamanho renderizado exato em qualquer largura intermediária, para que você avalie a rampa a olho antes de publicá-la. Copie o valor clamp() bruto, uma declaração font-size, ou um valor arbitrário do Tailwind. Tudo é calculado no seu dispositivo — os tamanhos que você digita ficam no navegador e nada é enviado à ArrayKit.

Recursos

Gere um valor clamp(mínRem, inclinaçãoVw + interceptoRem, máxRem) a partir de quatro números
Controle deslizante de prévia ao vivo mostra o tamanho renderizado em qualquer largura de viewport
Defina seu próprio tamanho de fonte raiz para controlar a conversão px → rem
Leia a inclinação vw exata e o intercepto rem por trás do valor
Copie o valor clamp() bruto, uma declaração font-size, ou uma classe Tailwind
Predefinições para texto de corpo, títulos, tipo hero e espaçamento fluido
Lida com rampas decrescentes em que o tamanho encolhe conforme o viewport cresce
Roda inteiramente no seu navegador, sem tamanhos enviados a lugar nenhum

Como usar Calculadora de CSS Clamp

Digite suas larguras de viewport mínima e máxima em pixels
Digite os tamanhos mínimo e máximo que o elemento deve alcançar nessas larguras
Ajuste o tamanho de fonte raiz se não for o padrão de 16px
Arraste o controle deslizante de prévia para conferir o tamanho renderizado ao longo da faixa
Copie o valor clamp() ou a declaração CSS para a sua folha de estilos

Exemplo

Entrada

min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px

Saída

font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);

16px em 320px cresce até 24px em 1200px e se mantém constante fora dessa faixa.

Erros comuns e solução de problemas

O texto nunca cresce além do tamanho mínimo. — Confira se o viewport mínimo é menor que o máximo — uma faixa invertida achata a rampa para que o termo preferido nunca prevaleça entre os limites.
Os tamanhos parecem errados depois de mudar o tamanho de fonte raiz. — Os rems do clamp() são relativos à raiz. Se sua página define html { font-size } para algo diferente de 16px, ajuste o campo raiz para que a saída em rem resolva para os pixels que você espera.
O valor escala de forma agressiva demais em telas muito largas. — O termo do meio continua subindo até o viewport máximo. Reduza a largura de viewport máxima ou o tamanho máximo para que a rampa atinja seu teto mais cedo e fique limitada além dele.
clamp() é ignorado em um navegador mais antigo. — clamp() tem amplo suporte em navegadores modernos. Para alvos muito antigos, forneça um font-size estático antes como fallback e deixe clamp() sobrescrevê-lo onde houver suporte.

Perguntas frequentes

Como uma calculadora de CSS clamp calcula a inclinação vw?: Ela traça uma reta pelos seus dois pontos de âncora: inclinação = (tamanhoMáx − tamanhoMín) / (viewportMáx − viewportMín). Como 100vw é igual à largura do viewport, o coeficiente vw no valor é essa inclinação multiplicada por 100, e o intercepto rem é o que sobra quando a reta é estendida de volta até um viewport de largura zero.
Por que o termo do meio mistura rem e vw?: O valor preferido é uma reta: uma parte fixa que não depende da largura (o intercepto rem) mais uma parte que cresce com o viewport (a inclinação vw). Misturar os dois deixa o tamanho escalar suavemente entre seu mínimo e máximo em vez de saltar num breakpoint.
Devo usar px ou rem nos limites do clamp?: Limites em rem respeitam a configuração de font-size do navegador do usuário, o que é melhor para acessibilidade, então esta ferramenta gera rem por padrão. Você pode mudar a leitura para px, mas limites de clamp em rem são a escolha mais segura para dimensionar texto.
Posso usar o mesmo valor clamp() para margens e espaçamentos?: Sim. clamp() funciona para qualquer comprimento, então o valor se aplica a padding, margin, gap e faixas de grid além de font-size. Use a predefinição de espaçamento fluido como ponto de partida e ajuste os tamanhos mínimo e máximo.
Qual tamanho de fonte raiz devo digitar?: Use o que sua página define no elemento html — 16px é o padrão do navegador e o padrão da ferramenta. Se você escala a raiz em outro lugar, digite esse valor para que a saída em rem se mapeie aos pixels que você realmente vê.
Os tamanhos que eu digito são enviados para algum lugar?: Não. A Calculadora de CSS Clamp roda inteiramente no seu navegador. As larguras de viewport e os tamanhos que você digita são usados só para calcular o valor no seu dispositivo e nunca são enviados à ArrayKit.

Ferramentas relacionadas

Conversor de Unidades CSS — Converta px, rem, em, pt e % com um tamanho de fonte raiz configurável.
Gerador de CSS Grid — Monte um layout de grid visualmente e copie o CSS.
Conversor de cores CSS — Converta entre HEX, RGB e HSL com uma amostra ao vivo.
Verificador de contraste — Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
Gerador de Cores Tailwind — Crie uma escala Tailwind 50-950 em OKLCH a partir de uma cor.
Gerador de Cubic Bezier — Molde uma curva de easing cubic-bezier() e copie o timing.