Recomendação de curso:

Função CSS clamp()

Definição e uso do CSS clamp() A função é usada para definir um valor que se ajustará automaticamente entre o valor mínimo e o valor máximo com base no tamanho da viewport.

clamp() A função clamp() tem três parâmetros: valor mínimo, valor preferido e valor máximo. Se o valor preferido estiver dentro do intervalo especificado, o navegador escolherá o valor preferido; caso contrário, o navegador escolherá o valor mínimo ou máximo.

Exemplo

Defina o tamanho da fonte mínima do elemento <h1> como 2rem e o tamanho da fonte máxima como 3.5rem. Além disso, defina o tamanho da fonte mínima do elemento <p> como 1rem e o tamanho da fonte máxima como 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Experimente você mesmo

Sintaxe do CSS

clamp(min, preferred, max)

Detalhes técnicos

Suporte do navegador

Os números nas tabelas representam a versão do navegador que suporta completamente essa função.