O data cu aparitia primelor smartphone-uri, design-ul site-urilor s-a schimbat radical. <\/p>\n
Unul din cele mai folosite buzzword-uri cand vine vorba de crearea de website-uri este “responsive”. El reprezinta o metoda sau filozofie de dezvoltare a site-urilor unde se doreste adaptarea content-ului si design-ului in functie de dispozitivul pe care este vizualizat. A devenit o necesitate acum cand suntem inconjurati de o multitudine de diverse dispozitive care au marimi si modalitati de interactionare complet diferite.<\/p>\n
Programatorii de frontend au mai multe metode in care pot obtine rezultatul dorit si de cele mai multe ori se foloseste o combinatie adaptata pentru necesitatile fiecarui site:<\/p>\n
1. Media Queries in CSS.<\/strong> Ele sunt comenzi scrise in CSS ce indica unui browser ce parte din cod sa fie incarca in functie de tipul si dimensiunea ecranelor. Codul de mai jos va indica browser-ului ca este necesar ca dimensiunea ecranului sa fie mai mica de 800 pixeli pentru a fi folosit:
\n
\n@media screen and (max-width:800px){
\n .text{ font-size: 14px; }
\n}
\n<\/span>
\n2. Grid Layout in CSS.<\/strong> Este o serie de comenzi care creaza un sistem de layout de tip grid. iti permite sa aranjezi elementele din site in coloane si randuri ce pot fi rearanjate in functie de pozitie, marime si layer. Spre deosebire de Flexbox care aranjeaza elementele pe o singura directie (fie pe rand, fie pe coloana), Grid poate aranja elementele pe doua directii controland randurile si coloanele. <\/p>\n