CSS clamp, min und max

CSS Funktion clamp wählt passende Werte

Die CSS-Funktion clamp() beschränkt den Wert für eine Eigenschaft zwischen einem Minimum und einem Maximum. Gleichzeitig passt sie den bevorzugten mittleren Wert flexibel zwischen Minimum und Maximum an. clamp, min und max bringen mehr Flexibilität anstelle von sichtbaren Bruchstellen und Sprüngen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

min()

Die min()-Funktion kann überall eingesetzt werden, wo ein Wert für eine Größe steht. min erwartet eine komma-getrennte Liste von Werten, aus der sich der Browser den jeweils kleinsten Wert aussucht, der für die aktuelle Situation passt.

Wynken, Blynken and Nod

one night sailed off in a wooden shoe sailed on a river of misty light into a sea of dew! Where are you going and what do you wish the old moon asked the three.

width: min(60ch, calc(100vw - 2rem));

Wenn die Breite des Browserfensters kleiner als 60ch ist, wird die Breite der Box durch den zweiten Wert (calc(100vw - 2rem)) festgelegt. Wird der Viewport größer als 100vw - 2em, kommt 60ch zum Zug und begrenzt die Breite der Box. So entsteht ein flexibles responsives Element ohne Media Query, die ansonsten erforderlich wäre.

max()

Die CSS-Funktion max macht genau das Gegenteil von min. 50vw entspricht 50% der Viewport-Breite. 20ch ist die minimale Breite der Box. Mit einem größeren Viewport erreicht die Box ihre maximale Breite von 30vw.

Wynken, Blynken and Nod

one night sailed off in a wooden shoe sailed on a river of misty light into a sea of dew! Where are you going and what do you wish the old moon asked the three.

width: max(30vw, 30ch);

min setzt also eine Obergrenze, max begrenzt nach unten. min verhindert, dass Elemente zu groß werden, max gibt eine größere Flexibilität bei den ganz großen Viewports.

clamp()

clamp ist im wörtlichen Sinne die Klammer für eine minimalen und einen maximalen Wert und einen bevorzugten Wert in der Mitte. Die CSS-Funktion wird bevorzugt für die Schriftgröße eingesetzt.

Bislang war das responsive Webdesign darauf angewiesen, die Schriftgröße, Zeilenhöhe und Zeichenabstand mittels Media Queries an bestimmten Breakpoints zu ändern.

Bilder und Text nehmen i.d.R. auf kleinen Monitoren meist die vollständige Breite des Viewports ein. Dort ist der Einsatz von font-size: clamp() mit einer minimalen, einer bevorzugten und einer maximalen Größe einfach durch Angaben wie 3vw.

                           + bevorzugter Wert
                           |
font-size: clamp(1.25rem, 3vw, 3rem);
                    |           |
                    +           +
            Untergrenze       Obergrenze

Aber hier einfach 3vw als bevorzugten Wert einzusetzen, ist alles andere als ideal. In vielen Fällen muss in die Angaben einbezogen werden, wo das die Anpassung der Schriftgröße anfängt wo die Anpassung aufhört – der flexible Bereich zwischen minimaler und maximaler Breite der Box.

font-size: clamp() online berechnen

Der Clou von clamp() sind dynamische Schriftgrößen, die sich zwischen der Schriftgröße für kleine Monitore bis zur Schriftgröße für einen großen Viewport dynamisch und ohne Breakpoints anpassen.

Wie kommen die Werte für preferred value zustande? Um ein gleichmäßiges Vergrößern / Verkleinern je nach Fensterbreite zu erzielen, liegen die Werte auf der Geraden zwischen minimaler und maximaler font-size. Mit letzter Kraft erinnern wir uns an die Mathestunden oder werfen einen Blick auf Steigung einer Geraden berechnen.

font-size mit CSS clamp()
rem
px
rem
px
rem
px
rem
px

		

	CSS clamp calculating preferred value for font-size using slope
	
	
	8
	7
	6
	5
	4
	3
	2
	1

	Schriftgröße y
	x
	Layout-Bereich
	
		
			                           
		
	

	10
	20
	30
	40
	50
	60
	70
	80
	90

	

	A (1.0 | 20.0)
	B (4.0 | 65.0)
	Δx = 65.0 - 20.0
	Δy = 4.0 - 1.0

	
	
	

	

	
		
		
		
		
	


			
			

Die Schriftgröße für eine Viewportgröße zwischen 320px und 960px liegt auf der roten Geraden.

Steigung = Δy Δx = maxFontsize - minFontsize maxVPsize - minVPsize

Mit der Steigung finden wir den Wert für den Schnittpunkt der Y-Achse mit der verlängerten gestrichtelten Linie:

Schnittpunkt=minVPsize*Steigung+minFontsize

Der preferredValue – bevorzugter Wert – der clamp-Funktion folgt damit der Formel

preferredValue = 
    Schnittpunkt[rem]+(Steigung * 100)[vw]

clamp Galerie

clamp() eignet sich für alle Eigenschaften, für die Zahlenwerte oder Prozente für die Breite oder einen Winkel gelten. Ein Beispiel für clamp() ist eine Bilder-Galerie ohne einen einzigen Breakpoint mit einem Minimum an CSS.

nebel-1200 raureif-1200 rhein-1200 weide-1200 australia-1200
HTML (mit HTML Custom Elements)
<clamp-gallery> 
	<clamp-img> 
		<img src="nebel-1200.webp" width="1200" height="900" alt="nebel-1200"
    		srcset="nebel-1960.webp 1960w,
    				nebel-1200.webp 1200w,
    				nebel-720.webp 720w"
    		sizes="(max-width: 900px) 90vw, 
			 		(max-width:1200px) 100vw, 
			 		50vw"> 
	</clamp-img> 
	<clamp-img> 
	…
	</clamp-img> 
 
</clamp-gallery> 
CSS – Gallerie mit CSS clamp()
clamp-gallery img { 
	object-fit: cover; 
	width: 100%; 
	height: 100%; 
}
clamp-gallery { 
	display: flex; 
	flex-wrap: wrap; 
	padding: 0; 
	margin: 0; 
} 
clamp-img { 
	flex: 1 1 15rem; 
	width: clamp(200px, 100%, 500px);; 
}

Auf kleinen Monitoren folgen die Bilder linear aufeinander, auf größeren Monitoren 2 x 2 und Bild in voller Breite, dann 1 x 3, 1 x 2 und 1 x 4 plus volle Breite und am Ende alle Bilder in einer Reihe.