Gerador de CSS clamp()

Gerador de CSS clamp(): tamanhos de fonte e espaçamentos fluidos | We.Inc

Gerador de CSS clamp() grátis. Defina um tamanho mínimo e um máximo e as larguras de tela entre eles para gerar CSS de font-size ou espaçamento fluido que escala de forma suave.

Gerador de CSS clamp()

Informe um tamanho para telas pequenas, outro para telas grandes e as larguras de tela em que cada um vale, e receba uma única linha clamp() que cresce suavemente entre eles. Use para títulos, texto, padding e gaps, para que o layout acompanhe a tela sem uma pilha de media queries.

Digite o menor tamanho que você quer, em pixels, e a largura de tela em que ele deve valer (muitas vezes 320 ou 375 pixels em celulares).
Digite o maior tamanho e a largura de tela em que ele deve parar de crescer (muitas vezes de 1200 a 1440 pixels).
A ferramenta calcula a reta entre esses dois pontos e a escreve como rem mais vw dentro de clamp().
Copie a linha de CSS para a sua folha de estilos. Troque o nome da propriedade se estiver dimensionando padding, margin ou gap em vez de texto.

Mantenha uma parte em rem no valor do meio. Um tamanho feito só de vw ignora a configuração de fonte do navegador do visitante, e o zoom de texto para de funcionar; misturar rem e vw mantém o zoom.
Não deixe o texto normal ficar abaixo de 16 pixels no celular. O tamanho fluido é mais útil em títulos, onde a diferença entre celular e desktop é grande.
Use as mesmas duas larguras de tela em todos os clamp() do site. Assim todos os tamanhos começam e param de crescer juntos, e as proporções do design ficam estáveis.
Se o seu site muda o tamanho de fonte raiz de 16 pixels, ajuste o campo do tamanho raiz para combinar, senão todos os valores em rem ficam errados na mesma proporção.

Perguntas frequentes

Como funciona o CSS clamp()?

clamp(MÍN, PREFERIDO, MÁX) usa o valor preferido, mas nunca fica abaixo de MÍN nem acima de MÁX. Com clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), o texto tem 16 pixels em telas estreitas, 24 pixels em telas largas e cresce em linha reta entre elas.

Qual é a fórmula por trás do valor do meio?

A inclinação é (tamanho máximo menos tamanho mínimo) dividido por (largura máxima menos largura mínima). A parte em vw é a inclinação vezes 100. A parte fixa é o tamanho mínimo menos a inclinação vezes a largura mínima, dividido depois pelo tamanho de fonte raiz para virar rem. Para 16 a 24 pixels entre telas de 320 e 1280 pixels: inclinação = 8 / 960 = 0.008333, então 0.8333vw; parte fixa = 16 menos 2.6667 = 13.3333 pixels, que é 0.8333rem.

O clamp() funciona em todos os navegadores?

Sim. Todas as versões atuais do Chrome, Edge, Firefox e Safari suportam clamp(). Só navegadores desatualizados há vários anos o ignoram, e eles usam o tamanho que você definiu antes no CSS.

Posso fazer algo diminuir quando a tela fica mais larga?

Sim. Digite um tamanho maior para a tela pequena do que para a grande. A inclinação fica negativa e a ferramenta continua colocando o tamanho menor primeiro no clamp(), como a função exige.

Devo usar clamp() também para espaçamento?

Funciona bem para padding de seções e gaps de grid, que costumam parecer grandes demais no celular e apertados em telas largas. Use as mesmas larguras de tela da tipografia para que espaçamento e texto escalem juntos.

Por que tamanhos fluidos precisam de dois pontos de referência

Um tamanho fluido é uma reta traçada entre dois pontos: o tamanho que você quer em uma largura de tela pequena e o que quer em uma grande. O clamp() então impede que a reta passe de qualquer uma das pontas. Escolher bem esses dois pontos importa mais que os números exatos: pegue a largura de celular mais estreita para a qual você projeta e a largura em que sua coluna de conteúdo para de crescer.
Se o ponto grande estiver muito além da sua coluna de conteúdo, o texto continua crescendo em monitores grandes depois que o layout parou de alargar, e os títulos começam a parecer exagerados ao lado de uma coluna de largura fixa. Alinhar o ponto grande com a largura do seu contêiner evita isso.

Acessibilidade e zoom

Os navegadores permitem aumentar o tamanho de fonte padrão, e muitas pessoas com baixa visão dependem disso. Um tamanho escrito só em vw ignora totalmente essa configuração. A parte em rem do valor do meio é o que mantém o tamanho fluido sensível à escolha do visitante, e por isso esta ferramenta sempre escreve a parte fixa em rem.
Confira o resultado aplicando zoom de 200 por cento na página. O texto escrito com clamp() deve continuar crescendo. Se um título quase não muda, a parte em vw está grande demais em relação à parte em rem; diminua a diferença entre o tamanho mínimo e o máximo e teste de novo.

Propriedade CSS

Tamanho mínimo

Tamanho máximo

Largura de tela para o tamanho mínimo

Largura de tela para o tamanho máximo

Tamanho de fonte raiz

Crescimento a cada 100px de tela

Parte fixa

A largura de tela do tamanho máximo precisa ser maior que a do tamanho mínimo.

Gerador de CSS clamp()