Informatică Dezvoltare web
Responsiv design CSS
Responsiv design în CSS permite site-urilor web să se adapteze automat la diferite dimensiuni de ecran, de la desktop la mobil. Se realizează prin tehnici precum media queries, unități relative și layout-uri flexibile. Exemplu: @media (max-width: 768px) { body { font-size: 14px; } }.
Tehnici cheie pentru design responsiv
- Media queries Reguli CSS care se aplică doar în anumite condiții, cum ar fi lățimea ecranului. Exemplu: @media (max-width: 600px) { ... }.
- Unități relative Folosește procente, em sau rem în loc de pixeli pentru dimensiuni care se scalează cu ecranul.
- Layout-uri flexibile Utilizează CSS Grid sau Flexbox pentru a aranja elementele într-un mod adaptabil.
Pași pentru implementarea designului responsiv
- 1 Adaugă viewport meta tag Include <meta name="viewport" content="width=device-width, initial-scale=1"> în <head> pentru controlul dimensiunii pe dispozitive mobile.
- 2 Scrie media queries Definește reguli CSS pentru breakpoints comune, cum ar fi 768px (tabletă) și 480px (mobil).
- 3 Testează pe diferite dispozitive Folosește instrumente de dezvoltator din browser pentru a simula diverse dimensiuni de ecran.
Începe cu un design pentru mobil și extinde-l pentru ecrane mai mari pentru a asigura o experiență optimă pe toate dispozitivele.