Gerador de CSS clamp
Informe larguras de tela e tamanhos para telas pequenas e grandes para gerar CSS que altera suavemente o tamanho do texto ou o espaçamento. Visualize a saída em px ou rem e depois copie o CSS e o código Tailwind ou salve-os como texto.
O que você pode fazer
Especifique 2 pares de largura e tamanho
Especifique tamanhos para uma viewport pequena e uma viewport grande. Compatível com 6 tipos: tamanho de fonte, espaçamentos, padding, margin, largura e altura.
Gere código em px ou rem
Insira todos os valores em px e escolha px ou rem para a saída. Obtenha uma declaração CSS e o código de propriedade arbitrária do Tailwind.
Confira o CSS gerado imediatamente
Aplica o CSS a dois elementos na pré-visualização. Verifique como o texto e o espaçamento aparecem na largura atual do quadro.
Como usar
Escolha a propriedade a alterar
Escolha a propriedade CSS que deseja especificar, como font-size para o tamanho do texto ou gap para o espaço entre elementos.
Insira duas larguras de viewport e tamanhos
Insira cada uma das duas larguras de viewport e seu tamanho em px. O tamanho da viewport menor não deve ser maior que o da viewport maior.
Confira a unidade de saída e gere
Escolha px ou rem nas configurações avançadas. Para rem, verifique também o tamanho de fonte base antes de pressionar "Gerar CSS".
Pré-visualize e obtenha o código
Copie o CSS e cole-o onde você vai usá-lo. Abra o código do Tailwind para obtê-lo. Você também pode copiar todos os 2 itens juntos ou salvá-los como texto.
Útil quando
Altere o tamanho dos títulos suavemente
Quando você quer definir tamanhos de texto para viewports estreitas e largas e variá-los continuamente entre essas larguras, em vez de em etapas.
Ajuste o espaçamento à viewport
Quando você quer que os espaços entre cartões ou o padding interno variem dentro dos tamanhos mínimo e máximo definidos.
Especificar tamanhos fluidos e ler a pré-visualização
Os 3 valores em clamp
clamp é uma função CSS que especifica um valor mínimo, um valor fluido e um valor máximo. A fórmula gerada conecta dois pontos de referência com uma expressão linear e limita tamanhos fora do intervalo aos tamanhos dos extremos.
Entrada em px; saída em px ou rem
Tanto as larguras de viewport quanto os tamanhos são inseridos em px. Para saída em rem, os tamanhos e o termo fixo são divididos pelo tamanho de fonte base, enquanto o coeficiente vw da largura da viewport é usado sem alteração.
Combine a base rem com o local onde o código é usado
Por padrão, o código trata 1rem como 16px. Se o tamanho da fonte do elemento raiz for diferente onde o código é usado, os tamanhos dos extremos e a forma como o tamanho muda também serão diferentes. Verifique também onde você usa o código.
O quadro da pré-visualização define a largura da viewport
A pré-visualização é um quadro de exibição independente. Ela calcula vw a partir da largura interna do quadro, e não da largura da tela inteira. Dependendo da propriedade, o mesmo CSS gerado é aplicado ao texto, ao espaço entre os dois elementos, ao espaçamento ou às dimensões do elemento.
Verifique também onde o código é usado
O texto e a estrutura da pré-visualização são fixos. Verifique também as fontes, textos longos, quebra de linha e ampliação de texto do navegador onde você usa o código. O código do Tailwind usa o formato de propriedade arbitrária; verifique também se ele é detectado e gerado onde você o usa.
Perguntas frequentes
O que acontece fora do intervalo de largura de viewport especificado?
Larguras menores que a largura menor especificada usam o tamanho mínimo, e larguras maiores que a largura maior especificada usam o tamanho máximo. Para rem, é necessário usar o mesmo tamanho de fonte base do momento em que o código foi gerado.
Qual é o tamanho de fonte base para rem?
Especifica quantos px são usados para calcular 1rem. O padrão é 16px, e você pode alterá-lo para 1–1000px nas configurações avançadas. Combine com o tamanho da fonte do elemento raiz onde você usará o código.
Posso especificar tamanhos iguais ou valores negativos?
Definir o mínimo e o máximo com o mesmo valor resulta em um tamanho fixo. Valores negativos são permitidos apenas para margin. Tamanhos que diminuem conforme a viewport aumenta não são compatíveis.
As alterações em propriedades ou valores são aplicadas imediatamente?
Alterá-los apaga o código gerado e a pré-visualização. Pressione "Gerar CSS" para atualizá-los. O mesmo vale quando você altera a unidade de saída ou o tamanho de fonte base.
Posso alterar o texto da pré-visualização?
O texto de exemplo e "Aa 123" são ambos fixos. Não há recurso de edição de texto. Verifique também o texto real e a largura de exibição na página que usa o CSS gerado.
Entrada e resultados
- Largura da viewport
- 1–100000px. A largura da viewport menor deve ser inferior à maior. Decimais também são aceitos.
- Tamanho
- 0–10000px. Apenas margin pode chegar a −10000px. O tamanho da viewport menor não deve ser maior que o da viewport maior.
- Saída
- Uma declaração CSS e uma propriedade arbitrária do Tailwind. Salve todos os 2 itens como css-clamp-generator.txt.
- Precisão
- A fórmula gerada usa coeficientes com até 13 dígitos significativos. Ocorre um erro, por exemplo, quando as larguras são tão próximas que a fórmula arredondada não consegue reproduzir os pontos de referência.