Gerador de clamp CSS fluido
Gere um valor CSS clamp() que dimensiona de forma suave um tamanho de letra ou espaçamento entre duas larguras de janela, em px ou rem.
- Funciona no navegador
- Sem envio
- O resultado fica no seu dispositivo
Privacidade e limitesExecuta no seu navegador. Nada é enviado.
O conteúdo das entradas fica neste separador; a Refentra não o envia nem guarda. As contagens agregadas opcionais de ações só são enviadas com o seu consentimento para medição de utilização. Limpe o espaço ao terminar.
Perfil suportado: 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; os parsers podem ter limites inferiores. Worker: 15 segundos (regex 1,5 segundos).
Verificar os dados e o resultado
- Preparar e escolher a operação
Escolha px ou rem de forma coerente, os tamanhos mínimo e máximo e as larguras da janela de visualização em que a interpolação fluida começa e termina.
- Verificar um exemplo concreto
Experimente esta amostra e compare com o resultado indicado: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Rever antes de reutilizar o resultado
Verifique as duas extremidades da janela de visualização e as larguras intermédias; fora do intervalo, o clamp mantém o mínimo ou o máximo.
Respostas para esta tarefa
De que depende o rem?
O rem usa o tamanho da fonte raiz. Trate de forma coerente as unidades da janela e do tamanho, e teste o zoom, em vez de assumir uma raiz fixa de 16px.
O que devo verificar se os dados falharem?
É necessário 0 ≤ mínimo ≤ máximo e 0 < janela inicial < janela final; extremidades iguais não conseguem definir um declive.
Onde termina o alcance desta ferramenta?
Gera um dimensionamento fluido linear, e não uma escala tipográfica adaptável completa; as quebras de linha, o zoom e as definições de letra do utilizador continuam a precisar de testes.