min(), max() e clamp() para Valores Fluidos
Limite valores entre mínimos e máximos usando min(), max() e a forma abreviada clamp().
min(), max() e clamp() para Valores Fluidos é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Por que utilizar funções de comparação?
As funções de comparação do CSS (min(), max(), clamp()) permitem criar tamanhos responsivos que se adaptam ao contexto sem consultas de mídia, de forma mais elegante e concisa do que abordagens baseadas em pontos de interrupção.
min() — Escolher o menor
min(a, b, ...) avalia todos os argumentos e utiliza o menor. Aqui, o "mínimo" é o resultado visual, ou seja, a opção mais restritiva.
<div class="container">Container</div>max() — Escolher o maior
max(a, b, ...) escolhe o maior valor, garantindo que um limite mínimo seja sempre atendido.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() restringe um valor a um intervalo. O valor preferido (o argumento do meio) normalmente é fluido. Os valores mínimo e máximo fornecem limites absolutos.
<h1>Clamped Heading</h1>Escala de tipografia fluida com clamp()
Substitua várias substituições em pontos de interrupção por um único clamp() para cada nível de título:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Espaçamento fluido com clamp()
Aplique tamanhos fluidos também a padding, margin e gap: uma técnica essencial para um design "intrínseco":
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() como proteção de largura
O padrão de contêiner mais simples: sempre ocupar 90% da janela de visualização, mas nunca ultrapassar 1200px, usando uma única expressão:
<div class="wrapper">Wrapper</div>max() para o tamanho mínimo da fonte
Garanta que o texto do corpo nunca fique pequeno demais em janelas de visualização menores:
<p class="text-body">Body text that never gets too small.</p>Aninhando min/max/clamp
Essas funções podem ser aninhadas para criar restrições complexas:
<div class="element">Padded element</div>Funções de comparação na grade
Utilize min() dentro de minmax() para definir um limite mínimo de coluna mais seguro:
<div class="grid"><div>Card</div></div>Suporte dos navegadores
As três funções de comparação têm suporte completo nos navegadores modernos (Chrome 79+, Firefox 75+, Safari 11.1+). Não são necessários prefixos de fornecedor.
Verificação rápida
Um título utiliza font-size: clamp(1rem, 3vw, 2.5rem). Em que largura da janela de visualização 3vw equivale a 1rem (considerando uma raiz de 16px)?
Recapitulação
min() escolhe o menor valor (limite superior). max() escolhe o maior (limite inferior). clamp(min, preferred, max) limita um valor fluido. Juntas, essas funções permitem criar tipografia e espaçamento fluidos sem consultas de mídia. O padrão mais poderoso é clamp(1.5rem, 4vw, 3rem) para títulos automaticamente responsivos.
Perguntas Frequentes
A aula “min(), max() e clamp() para Valores Fluidos” é grátis?
Sim — o texto completo de “min(), max() e clamp() para Valores Fluidos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “min(), max() e clamp() para Valores Fluidos”?
Limite valores entre mínimos e máximos usando min(), max() e a forma abreviada clamp(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “min(), max() e clamp() para Valores Fluidos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- calc() para Cálculos Dinâmicos
- min(), max() e clamp() para Valores Fluidos
- repeat() e minmax() no Grid
- color-mix() e Sintaxe de Cores Relativas