Gerador de CSS Clamp
Gere um valor fluido de clamp() do CSS a partir de tamanhos mínimo/máximo e larguras da viewport.
Saída
Insira um tamanho mínimo e máximo junto com o intervalo de viewport ao qual se aplicam, e obtenha uma expressão clamp() do CSS pronta para uso para tipografia ou espaçamento fluidos e responsivos.
Como usar
- Insira o tamanho mínimo e máximo em pixels.
- Insira a largura mínima e máxima da viewport entre as quais os tamanhos devem se aplicar.
- Copie a declaração clamp() gerada, renomeando opcionalmente a propriedade CSS.
Perguntas frequentes
- Como o valor fluido é calculado?
- Ele calcula uma inclinação linear entre os tamanhos mínimo e máximo ao longo do intervalo de viewport, expressa como uma fórmula em rem + vw dentro de clamp().
- Por que a saída usa rem e vw?
- rem mantém o tamanho base relativo às configurações de fonte do usuário, enquanto vw faz com que ele escale suavemente com a largura da viewport.
- E se minha viewport máxima for menor que a mínima?
- A ferramenta exibe uma mensagem de validação pedindo que você deixe a largura máxima da viewport maior que a mínima.