7.1 Funkcja min()
Funkcja min() zwraca najmniejszą wartość z listy argumentów. Jest to przydatne do ustawiania wartości,
które nie przekraczają określonego limitu.
Składnia:
selektor {
właściwość: min(wartość1, wartość2 ...);
}
Przykład użycia:
W tym przykładzie szerokość bloku nie będzie większa niż 300 pikseli, ale jeśli 100% elementu rodzica jest mniejsze niż 300 pikseli, zostanie użyta wartość 100%:
/* Szerokość bloku nie większa niż 300px, ale nie mniejsza niż 100px */
.block {
width: min(300px, 100%);
}
Przykład 2: Ograniczenie rozmiaru czcionki
W tym przykładzie rozmiar czcionki nie będzie większy niż 2em, ale jeśli 5% szerokości okna przeglądarki jest mniejsze, zostanie użyta ta wartość:
.text {
font-size: min(2em, 5vw);
}
7.2 Funkcja max()
Funkcja max() zwraca największą wartość z listy argumentów. Jest to przydatne do ustawiania wartości,
które nie spadają poniżej określonego limitu.
Składnia:
selektor {
właściwość: max(wartość1, wartość2, ...);
}
Przykład użycia
W tym przykładzie szerokość bloku nie będzie mniejsza niż 200 pikseli, ale jeśli 50% szerokości elementu rodzica jest większe niż 200 pikseli, zostanie użyta wartość 50%:
/* Szerokość bloku nie mniejsza niż 200px, ale może być większa */
.block {
width: max(200px, 50%);
}
Przykład 2: Minimalny rozmiar czcionki
W tym przykładzie rozmiar czcionki nie będzie mniejszy niż 1.5em, ale jeśli 2% szerokości okna przeglądarki jest większe,
zostanie użyta ta wartość:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Funkcja clamp()
Funkcja clamp() zwraca wartość ograniczoną minimalną i maksymalną wartością. Przyjmuje trzy argumenty:
wartość minimalną, preferowaną wartość i wartość maksymalną.
Składnia:
selektor {
właściwość: clamp(min, wyrażenie, max);
}
Przykład użycia
W tym przykładzie rozmiar czcionki będzie się zmieniać w zależności od szerokości okna przeglądarki: minimalnie 12 pikseli, maksymalnie 24 piksele, a preferowana wartość — 2% szerokości okna:
/* Czcionka o rozmiarze od 12px do 24px, w zależności od szerokości ekranu */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Przykład 2: Ograniczenie szerokości bloku
W tym przykładzie szerokość bloku będzie się zmieniać w zależności od szerokości elementu rodzica, ale nie mniej niż 200 pikseli i nie więcej niż 600 pikseli:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Przykład pełnej implementacji
.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>Przykład użycia funkcji min(), max() i clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Szerokość: clamp(200px, 50%, 600px)</div>
<p class="text">Rozmiar czcionki: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Szerokość: max(200px, 30%)</div>
<p class="text-small">Rozmiar czcionki: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION