.section { padding: 16px; } @media (min-width: 1024px) { .section { padding: 48px; } }Conținutul folosește eficient telefonul, dar respiră mai mult pe ecrane mari.
LECȚIA 73 DIN 100
Mărește spațierea la un breakpoint
Oferă o spațiere compactă pe mobil și una generoasă pe desktop.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Breakpoints nu sunt doar pentru coloane. Orice declarație poate răspunde condiției; aici paddingul crește numai când viewportul are cel puțin 1024px.
@media (max-width: 1024px) { .section { padding: 48px; } }Paddingul mare pe ecrane de maximum 1024px poate consuma inutil spațiul mobil.
PASUL 2 · APLICĂ
Exercițiul tău
Păstrează paddingul de 16px și setează 48px de la lățimea de 1024px.
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
- ○Paddingul de bază este 16px.
- ○La minimum 1024px paddingul este 48px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Cascada păstrează valoarea de bază până când condiția min-width devine adevărată.