CSS: Entendendo a função CLAMP

Domine inglês técnico de programação em 2025, seja qual for seu nível. Inscrição gratuita

Paulo Clemente

2 min de leitura

Navegação Rápida:

Vamos ficar por dentro da função clamp() do CSS. Essa função parece ser pouco conhecida, mesmo entre programadores front-end, a ideia desse conteúdo é começar com um exemplo básico para entender como ela pode ser usada para ajustar dinamicamente o tamanho da fonte com base na largura da tela.

Definindo um Título e Texto

Vamos colocar um título e um parágrafo de texto para contextualizar:


<h1>Title Here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Usando Media Queries para Ajustar `font-size`

Normalmente, para ajustar o tamanho da fonte de acordo com a largura da página, usamos media queries. Por exemplo:


@media (min-width: 300px) {
    h1 {
        font-size: 2rem;
    }
}

Mas, agora vamos simplificar esse processo introduzindo a `clamp()`

Essa função permite definir um valor mínimo, um valor ideal e um valor máximo para uma propriedade CSS em uma única linha. Aqui está um exemplo aplicado ao font-size do nosso <h1>:


h1 {
    font-size: clamp(1rem, 2vw + 1rem, 3rem);
}

Vamos entender o que está acontecendo

O que cada valor faz:

Valor Mínimo: O menor valor que a fonte pode ter (1rem).

Valor Ideal: Um cálculo dinâmico que depende da largura da viewport (2vw + 1rem).

Valor Máximo: O maior valor que a fonte pode ter (3rem).

Isso significa que o tamanho da fonte:

Nunca será menor que 1rem.

Será calculado como 2vw + 1rem dentro dos limites mínimo e máximo.

Nunca será maior que 3rem.

Funcionamento Prático

Se a largura da viewport for pequena, a fonte terá o tamanho mínimo de 1rem.

À medida que a largura aumenta, o tamanho da fonte será calculado dinamicamente.

Se a largura for muito grande, a fonte não ultrapassará o tamanho máximo de 3rem.


/* Exemplo de ajuste */
h1 {
    font-size: clamp(1rem, 2vw + 1rem, 3rem);
}

Outros Usos do `clamp()`

O clamp() não é restrito ao font-size; ele também pode ser usado para definir margens, padding, larguras e alturas de caixas, entre outras propriedades CSS. Ele é uma maneira eficiente de estabelecer limites mínimos e máximos para várias propriedades.


/* Exemplo de uso para margin */
.container {
    margin: clamp(10px, 2vw, 50px);
}

Compatibilidade com Navegadores

A boa notícia é que todos os navegadores modernos suportam clamp(). Aqui está a lista de compatibilidade:

Chrome

Firefox

Safari

Edge

Infelizmente, o Internet Explorer 🫠 não suporta essa função, mas como ele está cada vez menos utilizado, isso não deve ser um problema para a maioria dos desenvolvedores.

O clamp() é uma ferramenta poderosa para criar designs responsivos de maneira mais simples e eficiente. Ele elimina a necessidade de múltiplas media queries, tornando o código mais limpo e fácil de manter.

Referência:

Documentação MDN sobre clamp()

Espero que essa introdução ao clamp() tenha sido útil. Qualquer dúvida, utilize nossas redes sociais para perguntar!

Navegação Rápida:

Definindo um Título e Texto

Usando Media Queries para Ajustar font-size

Mas, agora vamos simplificar esse processo introduzindo a clamp()