7.1 Funktion min()
Die Funktion min() gibt den kleinsten Wert aus einer Liste von Argumenten zurück. Das ist nützlich, um Werte festzulegen,
die ein bestimmtes Limit nicht überschreiten.
Syntax:
selektor {
Eigenschaft: min(value1, value2 ...);
}
Beispiel der Verwendung:
In diesem Beispiel wird die Breite des Blocks nicht mehr als 300 Pixel betragen, aber wenn 100% des Elternelements weniger als 300 Pixel sind, wird der Wert von 100% verwendet:
/* Breite des Blocks nicht mehr als 300px, aber nicht weniger als 100px */
.block {
width: min(300px, 100%);
}
Beispiel 2: Begrenzung der Schriftgröße
In diesem Beispiel wird die Schriftgröße nicht mehr als 2em betragen, aber wenn 5% der Viewport-Breite weniger ist, wird dieser Wert verwendet:
.text {
font-size: min(2em, 5vw);
}
7.2 Funktion max()
Die Funktion max() gibt den größten Wert aus einer Liste von Argumenten zurück. Das ist nützlich, um Werte festzulegen,
die nicht unter ein bestimmtes Limit fallen.
Syntax:
selektor {
Eigenschaft: max(value1, value2, ...);
}
Beispiel der Verwendung
In diesem Beispiel wird die Breite des Blocks nicht weniger als 200 Pixel betragen, aber wenn 50% der Breite des Elternelements mehr als 200 Pixel sind, wird der Wert von 50% verwendet:
/* Breite des Blocks nicht weniger als 200px, kann aber mehr sein */
.block {
width: max(200px, 50%);
}
Beispiel 2: Minimale Schriftgröße
In diesem Beispiel wird die Schriftgröße nicht weniger als 1.5em betragen, aber wenn 2% der Viewport-Breite mehr ist,
wird dieser Wert verwendet:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Funktion clamp()
Die Funktion clamp() gibt einen Wert zurück, der durch minimale und maximale Werte begrenzt ist. Sie nimmt drei Argumente an:
Minimalwert, bevorzugter Wert und Maximalwert.
Syntax:
selektor {
Eigenschaft: clamp(min, Ausdruck, max);
}
Beispiel der Verwendung
In diesem Beispiel wird die Schriftgröße je nach Breite des Viewports geändert: mindestens 12 Pixel, maximal 24 Pixel, und der bevorzugte Wert ist 2% der Fensterbreite:
/* Schriftgröße von 12px bis 24px, je nach Bildschirmbreite */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Beispiel 2: Begrenzung der Blockbreite
In diesem Beispiel wird die Breite des Blocks je nach Breite des Elternelements geändert, aber nicht weniger als 200 Pixel und nicht mehr als 600 Pixel:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Beispiel der vollständigen Implementierung
.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>Beispiel der Verwendung von min(), max() und clamp() Funktionen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Breite: clamp(200px, 50%, 600px)</div>
<p class="text">Schriftgröße: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Breite: max(200px, 30%)</div>
<p class="text-small">Schriftgröße: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION