Mis on lehe kohanduv versioon?

Kohanduv veebileht on lähenemine veebiarendusele, kus lehe disain ja sisu kohanduvad automaatselt kasutaja seadme ekraanisuurusega (lauaarvuti, tahvelarvuti, nutitelefon).

Põhiprintsiibid:

• Lainevõrk (Fluid Grids): Kasutatakse protsentuaalseid või muid suhtelisi ühikuid elementide suuruste määramiseks fikseeritud pikslite asemel.
• Paindlikud pildid (Flexible Images): Piltide suuruse muutmine proportsionaalselt, et nad ei ületaks konteineri piire.
• Meedia päringud (Media Queries): CSS reeglid, mis võimaldavad rakendada erinevaid stiile sõltuvalt seadme omadustest, nagu ekraani laius, kõrgus, orientatsioon ja resolutsioon.

CSS meedia päringu näide:

/* Üldised stiilid kõigile seadmetele */
body {
    font-size: 16px;
}

/* Stiilid ekraanidele kuni 768px laiusega (nt tahvelarvutid ja mobiiltelefonid) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Näide navigatsiooni paigutuse muutmisest */
        display: flex;
        flex-direction: column;
    }
}

/* Stiilid ekraanidele kuni 480px laiusega (nt mobiiltelefonid) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    pildid {
        /* Pildid võtavad kogu konteineri laiuse */
        max-width: 100%;
        height: auto;
    }
}

Kohanduva lehe eesmärk on tagada mugav kasutamine igal seadmel ilma vajaduseta luua eraldi lehtversioone.

Testimine hõlmab:

• Elementide korrektset kuvamist erinevates resolutsioonides.
• Navigatsiooni ja kasutusmugavuse tagamist.
• Horisontaalrullimise puudumist.
• Teksti loetavust.
• Lehe laadimise jõudlust.