7.1 Função min()
A função min() retorna o menor valor de uma lista de argumentos. Isso é útil para definir valores que não ultrapassam um certo limite.
Sintaxe:
seletor {
propriedade: min(value1, value2 ...);
}
Exemplo de uso:
Neste exemplo, a largura do bloco não será maior que 300 pixels, mas se 100% do elemento pai for menor que 300 pixels, será usado o valor de 100%:
/* Largura do bloco não maior que 300px, mas não menor que 100px */
.block {
width: min(300px, 100%);
}
Exemplo 2: Limite do tamanho da fonte
Neste exemplo, o tamanho da fonte não será maior que 2em, mas se 5% da largura da janela de visualização for menor, será usado esse valor:
.text {
font-size: min(2em, 5vw);
}
7.2 Função max()
A função max() retorna o maior valor de uma lista de argumentos. Isso é útil para definir valores que não caem abaixo de um certo limite.
Sintaxe:
seletor {
propriedade: max(value1, value2, ...);
}
Exemplo de uso
Neste exemplo, a largura do bloco não será menor que 200 pixels, mas se 50% da largura do elemento pai for maior que 200 pixels, será usado o valor de 50%:
/* Largura do bloco não menor que 200px, mas pode ser maior */
.block {
width: max(200px, 50%);
}
Exemplo 2: Tamanho mínimo da fonte
Neste exemplo, o tamanho da fonte não será menor que 1.5em, mas se 2% da largura da janela de visualização for maior, será usado esse valor:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Função clamp()
A função clamp() retorna um valor limitado aos valores mínimo e máximo. Ela aceita três argumentos: valor mínimo, valor preferido e valor máximo.
Sintaxe:
seletor {
propriedade: clamp(min, expressão, max);
}
Exemplo de uso
Neste exemplo, o tamanho da fonte será ajustado de acordo com a largura da janela de visualização: no mínimo 12 pixels, no máximo 24 pixels, e o valor preferido é 2% da largura da janela:
/* Fonte de tamanho entre 12px e 24px, dependendo da largura da tela */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Exemplo 2: Limitação da largura do bloco
Neste exemplo, a largura do bloco será ajustada conforme a largura do elemento pai, mas não menor que 200 pixels e não maior que 600 pixels:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Exemplo de implementação completa
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de uso das funções min(), max() e clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Largura: clamp(200px, 50%, 600px)</div>
<p class="text">Tamanho da fonte: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Largura: max(200px, 30%)</div>
<p class="text-small">Tamanho da fonte: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION