Funcții Matematice în CSS: clamp(), min() și max()

1. Anatomia Funcției clamp()

Funcția primește trei argumente obligatorii, evaluate în această ordine:

font-size: clamp(valoare-minima, valoare-fluid-scalabila, valoare-maxima);

• Dacă valoarea din mijloc scade sub valoare-minima, browserul aplică minimul;
• Dacă este între limite, crește sau scade lin, cadru cu cadru;
• Dacă depășește valoare-maxima, este plafonată la maxim.

2. Formula Magică pentru Tipografie Fluidă și WCAG Zoom

Marea greșeală a începătorilor este utilizarea unităților pure de viewport (vw) ca valoare preferată:

/* GREȘIT (Încalcă regulile WCAG 2.1 pentru accesibilitate): */
h1 {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
}

Abordarea Corectă: Combinarea rem cu vw

Adăugând o bază de rem la valoarea scalabilă, garantăm că textul respectă întotdeauna preferințele de font și zoom ale utilizatorului:

/* CORECT ȘI CONFORM ACCESIBILITĂȚII: */
h1 {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.8rem);
}

p.lead {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
}

3. Funcția min(): Alegerea celei mai mici valori

Funcția min() returnează valoarea cea mai mică dintr-o listă. Deși pare contraintuitiv la prima vedere, min() este folosită cel mai adesea pentru a stabili o lățime maximă:

/* Creeaza un container centrat fara overflow pe telefoane */
.container {
  width: min(100% - 32px, 1140px);
  margin-inline: auto;
}

Dacă ecranul are 2000px, 1140px este mai mic decât 100% - 32px, deci containerul se oprește la 1140px. Dacă ecranul are 360px de mobil, 100% - 32px devine mai mic, lăsând automat câte 16px spațiu de siguranță pe margini.

4. Funcția max(): Stabilirea unei bariere minime garantate

În mod similar, max() returnează valoarea cea mai mare, fiind utilă pentru stabilirea unor dimensiuni minime de siguranță:

/* Garanteaza ca butonul are cel putin 44px inaltime pe mobil (Touch Target) */
.btn-touch {
  height: max(2.5rem, 44px);
}

/* Padding dinamic care nu devine niciodata mai mic de 20px */
.sectiune {
  padding-block: max(5vw, 24px);
}

5. Puterea calculelor cu calc(): Îmbinarea unităților eterogene

Funcția calc() permite efectuarea celor 4 operații fundamentale (+, -, *, /) între unități diferite de măsură:

.sidebar {
  /* Scade inaltimea header-ului fix de 64px din inaltimea totala a ecranului */
  height: calc(100vh - 64px);
}

.coloana {
  /* Imparte ecranul in 3 coloane scazand gap-ul de 24px */
  width: calc((100% - 48px) / 3);
}

Atenție la spațiere: Operatorii + și - din interiorul funcției calc() trebuie să aibă obligatoriu spații înainte și după (ex: 100% - 20px, NU 100%-20px), pentru a nu fi confundați cu semnul minus al unui număr negativ.