# CSS `clamp()` Berechnung – Grundlagen & Beispiele

## 1. Grundprinzip

Die CSS-Funktion:

„`css
font-size: clamp(MIN, IDEAL, MAX);
„`

bedeutet:

– **MIN** = kleinster Wert, den es jemals annehmen darf
– **IDEAL** = Berechnung, die sich dynamisch verändert (z. B. `1rem + 1vw`)
– **MAX** = größter Wert, den es jemals annehmen darf

—

## 2. Beispiel aus globals.css

„`css
h2 {
font-size: clamp(var(–h2-min), 1.1rem + 1vw, var(–h2-max));
}
„`

Angenommen:

– `–h2-min = 1.5rem = 24px`
– `–h2-max = 2.0rem = 32px`

—

## 3. Verhalten beim Browser-Resize

– **Sehr kleines Fenster (Smartphone):**
Die Formel `1.1rem + 1vw` könnte 20px ergeben.
→ Da 20px kleiner ist als MIN (24px), nimmt Clamp den MIN-Wert **24px**.

– **Mittleres Fenster (Tablet):**
Die Formel wächst mit der Fensterbreite. Liegt der Wert zwischen 24px und 32px, wird dieser IDEAL-Wert genommen.
→ Schriftgröße passt sich dynamisch an.

– **Sehr großes Fenster (Desktop/4K):**
Die Formel könnte 40px ergeben.
→ Da 40px größer ist als MAX (32px), nimmt Clamp den MAX-Wert **32px**.

—

## 4. Berechnung im Detail

Beispiel: `1.1rem + 1vw`

– Basis: `1rem = 16px`
– `1.1rem = 17.6px`
– `1vw = 1% der Viewport-Breite`

Formel:

\[
\text{font-size} = 17.6\text{px} + 0.01 \times \text{Viewportbreite}
\]

Beispiel bei 1200px Breite:

\[
17.6 + (1200 \times 0.01) = 17.6 + 12 = 29.6\text{px}
\]

→ Ergebnis: 29.6px (liegt zwischen MIN 24px und MAX 32px).

—

## 5. Kurzfassung (Spickzettel)

– `clamp(MIN, IDEAL, MAX)` = „nimm IDEAL, aber halte dich an MIN und MAX“.
– **MIN** = nicht kleiner als …
– **MAX** = nicht größer als …
– **IDEAL** = dynamische Berechnung (z. B. mit `vw`).
– Browser kleiner → Schrift bleibt ≥ MIN.
– Browser größer → Schrift bleibt ≤ MAX.

—

## 6. Umrechnung px → rem

Basis: `1rem = 16px`

Formel:

\[
\text{rem-Wert} = \frac{\text{Pixelwert}}{16}
\]

Beispiele:

– 22px → 22 ÷ 16 = **1.375rem**
– 24px → 24 ÷ 16 = **1.5rem**
– 32px → 32 ÷ 16 = **2rem**
– 48px → 48 ÷ 16 = **3rem**

—

## 7. Beispiel-Tabelle px → rem

| px | rem |
|—–|——-|
| 14 | 0.875 |
| 15 | 0.9375 |
| 16 | 1.0 |
| 18 | 1.125 |
| 20 | 1.25 |
| 22 | 1.375 |
| 24 | 1.5 |
| 32 | 2.0 |
| 48 | 3.0 |

—

✅ Damit hast du eine **responsive Typografie** mit `clamp()` und eine schnelle Referenz für px → rem Umrechnung.