Gerador CSS clamp()
Gere um tamanho fluido CSS clamp() (tipografia responsiva) entre duas larguras de ecrã.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Um tamanho que acompanha o ecrã
Indique o tamanho mín e máx e as larguras de ecrã correspondentes: a ferramenta calcula o valor clamp() para colar no seu CSS, com uma pré-visualização que reage à largura da janela.
-
Tamanho mín / máx
Ex. 16px a 24px.
-
Ecrãs de referência
Ex. 320px a 1280px.
-
Copie o clamp()
Em font-size, padding, etc.
Exemplo: 16 → 24px (320 → 1280px)
| Dado | Valor |
|---|---|
| Tamanho mín / máx | 16px / 24px = 1rem / 1.5rem |
| Ecrãs | 320px → 1280px |
| Declive fluido | 0.833vw |
| Resultado | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
A 320px o tamanho é 16px, a 1280px é 24px, e varia linearmente entre eles. Cálculo 100% local.
Perguntas frequentes
Para que serve o clamp()?
A função CSS clamp(mín, preferido, máx) limita um valor entre um mínimo e um máximo, com um valor preferido que se adapta à largura do ecrã. É a forma moderna de fazer tamanhos de fonte fluidos sem media queries.
Como se calcula o valor preferido?
Traça-se uma reta entre (largura mín, tamanho mín) e (largura máx, tamanho máx). A parte central combina uma base fixa em rem e um declive em vw, por exemplo 0.833rem + 0.833vw, limitada pelos mín/máx em rem.
Porquê misturar rem e vw?
O vw faz o tamanho crescer com a largura da janela (fluidez); o rem acrescenta uma base fixa para que o declive não comece do zero. A combinação dá um crescimento linear e legível, que respeita o zoom do utilizador.
É preciso manter mín e máx?
Sim. Sem limites, o texto ficaria minúsculo em ecrãs pequenos e enorme em muito grandes. O clamp() bloqueia o valor fora do seu intervalo de larguras de referência.