Gere um clamp() que ajusta o tamanho do texto de forma fluida de telas pequenas a grandes.
O clamp(min, preferred, max) usa o valor preferencial, mas nunca o deixa sair do intervalo mín.–máx. Com um valor preferencial de rem + vw, o texto cresce linearmente com a largura da viewport e para em ambas as extremidades. Uma linha substitui várias media queries.
Uma linha reta que passa por (viewport mín., tamanho mín.) e (viewport máx., tamanho máx.). Inclinação = (tamanho máx. − tamanho mín.) ÷ (viewport máx. − viewport mín.). A inclinação × 100 é o coeficiente de vw; o intercepto y é a parte fixa.
O rem se ajusta quando os usuários aumentam o tamanho base da fonte no navegador. Fixá-lo em px ignora essa configuração — uma falha de acessibilidade. Use rem a menos que você tenha um motivo específico para não usar.
O vw puro fica pequeno demais em telas estreitas e grande demais em telas largas. O clamp bloqueia os extremos.
Sim — a mesma lógica se aplica a padding, gap e margin.
Todos os principais navegadores desde 2020. Não funciona no IE, que não é mais suportado.
Basta inserir os tamanhos de fonte mínimo e máximo junto com as larguras de viewport mínima e máxima correspondentes.
Sim, um botão de cópia dedicado permite copiar instantaneamente a regra CSS clamp() gerada.
A fórmula gerada combina unidades rem e vw para criar uma transição suave entre os limites mínimo e máximo definidos.
Não, a calculadora de CSS clamp é totalmente gratuita para uso direto no seu navegador, sem necessidade de cadastro.