Gerador de clamp CSS fluido
Gere um valor CSS clamp() que escala de forma suave um tamanho de fonte ou espaçamento entre duas larguras de viewport, em px ou rem.
- Funciona no navegador
- Sem upload
- O resultado fica no seu dispositivo
Privacidade e limitesRoda no seu navegador. Nada é enviado.
O conteúdo das entradas fica nesta aba; a Refentra não o envia nem armazena. As contagens agregadas opcionais de ações só são enviadas com seu consentimento para medição de uso. Limpe o espaço ao terminar.
Perfil compatível: Uma unidade, px ou rem; 0≤min≤max, 0<início<fim. Em rem, limites da janela também em rem.
Máximo 200.000 unidades UTF-16; parsers podem aceitar menos. Worker: 15 segundos (regex 1,5 segundo).
Trabalhe com a entrada e o resultado
- Prepare e escolha a operação
Escolha px ou rem de forma consistente, os tamanhos mínimo e máximo e as larguras de viewport em que a interpolação fluida começa e termina.
- Confira um exemplo concreto
Use este exemplo e compare com o resultado indicado: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Confira antes de reutilizar a saída
Confira os dois extremos de viewport e as larguras intermediárias; fora do intervalo, o clamp mantém o valor mínimo ou o máximo.
Respostas para esta tarefa
Do que o rem depende?
O rem usa o tamanho da fonte raiz. Trate as unidades de viewport e de tamanho de forma consistente e teste com zoom, em vez de presumir uma raiz fixa de 16px.
O que conferir se a entrada for rejeitada?
É preciso ter 0 ≤ mínimo ≤ máximo e 0 < viewport inicial < viewport final; extremos de viewport iguais não definem uma inclinação.
Onde esta ferramenta termina?
A ferramenta gera um tamanho fluido linear, e não uma escala tipográfica responsiva completa; a quebra de linha, o zoom e as configurações de fonte do usuário ainda precisam ser testados.