.hero-title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; }Textul nu scade sub 2rem și nu crește peste 4rem, iar între ele răspunde la viewport.
LECȚIA 74 DIN 100
Creează un titlu fluid cu clamp()
Lasă titlul să crească odată cu viewportul, între limite sigure.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
clamp(minim, preferat, maxim) limitează o valoare fluidă. Browserul folosește valoarea preferată cât timp ea rămâne între limitele minimă și maximă.
.hero-title { font-size: 5vw; }O valoare numai în vw nu are limite și poate deveni prea mică sau prea mare.
PASUL 2 · APLICĂ
Exercițiul tău
Setează font-size la clamp(2rem, 5vw, 4rem) și line-height la 1.1.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Titlul folosește clamp() cu limitele cerute.
- ○Înălțimea liniei este 1.1.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Cele trei argumente exprimă limita mică, valoarea fluidă și limita mare, iar line-height păstrează rândurile compacte.