CSSMedia QueriesFront-endProgramaçãoFundamentos da Programação

CSS: Entendendo a função CLAMP

Paulo Clemente

Paulo Clemente

2 min de leitura
CSS
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:
  1. Valor Mínimo: O menor valor que a fonte pode ter (1rem).
  1. Valor Ideal: Um cálculo dinâmico que depende da largura da viewport (2vw + 1rem).
  1. 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

  1. Se a largura da viewport for pequena, a fonte terá o tamanho mínimo de 1rem.
  1. À medida que a largura aumenta, o tamanho da fonte será calculado dinamicamente.
  1. 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:
Espero que essa introdução ao clamp() tenha sido útil. Qualquer dúvida, utilize nossas redes sociais para perguntar!

Conheça o Rocketseat Para Empresas

Oferecemos soluções personalizadas para empresas de todos os portes.

Saiba mais
Paulo Clemente

Paulo Clemente

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

Imagem contendo uma carta e um símbolo de check
NewsletterReceba conteúdos inéditos e novidades gratuitamente