Funções Min, Max e Clamp
Use min(), max() e clamp() para criar dimensionamentos adaptáveis à largura do contêiner ou da janela de visualização.
Funções Min, Max e Clamp é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 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 usar funções de comparação do CSS?
As funções de comparação do CSS permitem expressar um dimensionamento condicional sem JavaScript: "use este tamanho, mas nunca menor ou maior que estes limites". Elas são fundamentais para projetos fluidos e responsivos modernos.
Função min()
min() retorna o menor valor de uma lista de valores separados por vírgulas. O navegador escolhe o valor que for menor no tamanho atual da área de visualização.
<div class="container">Container width: min(800px, 90%)</div>
Função max()
max() retorna o valor maior. É útil para definir tamanhos mínimos que também possam crescer.
<p>Text sized with max(1rem, 2vw)</p>
Função clamp()
clamp(min, preferred, max) restringe um valor entre um mínimo e um máximo. O valor preferido geralmente é fluido, como vw.
<h1>Clamped Heading</h1>
clamp() para tipografia fluida
A tipografia fluida com clamp() elimina a necessidade de várias substituições do tamanho da fonte em consultas de mídia:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>Body copy that scales fluidly with the viewport.</p>
clamp() para espaçamento fluido
Aplique o mesmo padrão ao espaçamento para obter margens e preenchimentos naturalmente responsivos:
<div class="section">Section with fluid padding</div>
min() para contêineres
Um padrão seguro de contêiner que nunca ultrapassa uma largura máxima e nunca adiciona rolagem horizontal:
<div class="wrapper">Safe wrapper container</div>
Aninhamento de funções
Você pode aninhar funções de comparação para criar expressões complexas:
<p class="hero-text">Nested min/max inside clamp()</p>
calc() combinado com clamp()
Use calc() dentro de clamp() para interpolar com precisão entre dois tamanhos:
<h1>Precise fluid heading</h1>
min-content max-content fit-content
CSS também oferece valores de tamanho baseados em palavras-chave:
min-content: menor tamanho possível sem transbordamentomax-content: ocupa o espaço necessário para o conteúdofit-content(): como max-content, mas limitado ao limite fornecido
<span class="tag">Tag label</span>
Compatibilidade com navegadores
min(), max() e clamp() são compatíveis com todos os navegadores modernos. Não são necessários prefixos. Eles podem ser usados em qualquer lugar onde se espere um valor de comprimento, frequência, tempo ou número.
Verificação rápida
Um título usa font-size: clamp(1rem, 4vw, 3rem) em uma janela de visualização com 600px de largura. Qual é o tamanho da fonte?
Recapitulação
min() escolhe o menor valor, e max() escolhe o maior. clamp(min, preferred, max) mantém um valor fluido dentro de limites. Essas funções permitem criar tipografia e espaçamento fluidos modernos, eliminando muitas vezes a necessidade de várias substituições em consultas de mídia.
Perguntas Frequentes
A aula “Funções Min, Max e Clamp” é grátis?
Sim — o texto completo de “Funções Min, Max e Clamp” é 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 “Funções Min, Max e Clamp”?
Use min(), max() e clamp() para criar dimensionamentos adaptáveis à largura do contêiner ou da janela de visualização. 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 4 de 4.
Quanto tempo leva a aula “Funções Min, Max e Clamp”?
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
- Unidades Absolutas: px, pt e cm
- Unidades Relativas: em e rem
- Unidades da Janela de Visualização: vw, vh e dvh
- Funções Min, Max e Clamp