Ce este versiunea adaptivă a paginii?

Designul adaptiv este o abordare în dezvoltarea web în care designul și conținutul paginii se ajustează automat la dimensiunea ecranului dispozitivului utilizatorului (desktop, tabletă, smartphone).

Principii de bază:

• Grilă flexibilă (Fluid Grids): Utilizarea procentelor sau a altor unități relative pentru a stabili dimensiunile elementelor în loc de pixeli fixați.
• Imagini flexibile (Flexible Images): Redimensionarea proporțională a imaginilor pentru a nu depăși containerul.
• Interogări media (Media Queries): Reguli CSS care permit aplicarea de stiluri diferite în funcție de caracteristicile dispozitivului, cum ar fi lățimea ecranului, înălțimea, orientarea și rezoluția.

Exemplu de utilizare a unei interogări media în CSS:

/* Stiluri generale pentru toate dispozitivele */
body {
    font-size: 16px;
}

/* Stiluri pentru ecrane cu lățimea până la 768px (de exemplu, tablete și telefoane mobile) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Exemplu de modificare a aspectului de navigare */
        display: flex;
        flex-direction: column;
    }
}

/* Stiluri pentru ecrane cu lățimea până la 480px (de exemplu, telefoane mobile) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Imaginile ocupă întreaga lățime a containerului */
        max-width: 100%;
        height: auto;
    }
}

Scopul designului adaptiv este de a asigura utilizarea confortabilă a site-ului pe orice dispozitiv fără a fi nevoie să se creeze versiuni separate ale paginilor.

Testarea versiunii adaptive include verificarea:

• A afișării corecte a elementelor la diferite rezoluții.
• A ușurinței de navigare și interacțiune.
• A lipsei derulării orizontale.
• A lizibilității textului.
• A performanței încărcării paginii.