Kas ir lapas adaptīvā versija?

Adaptīvā izkārtojuma pieeja ir tīmekļa izstrādes pieeja, kurā lapas dizains un saturs automātiski pielāgojas lietotāja ierīces ekrāna izmēram (dators, planšetdators, viedtālrunis).

Galvenie principi:

• Līdzīgs režģis (Fluid Grids): Izmanto procentuālas vai citas relatīvas vienības elementu izmēru noteikšanai vietā ar fiksētiem pikseļiem.
• Līdzīgas attēli (Flexible Images): Attēlu izmēru maiņa proporcionāli, lai tie neizietu ārpus konteineru robežām.
• Mediju vaicājumi (Media Queries): CSS noteikumi, kas ļauj piemērot dažādus stilus atkarībā no ierīces īpašībām, piemēram, ekrāna platuma, augstuma, orientācijas un izšķirtspējas.

CSS mediju vaicājuma piemērs:

/* Visu ierīču kopējie stili */
body {
    font-size: 16px;
}

/* Stili ekrāniem līdz 768px platumā (piemēram, planšetdatori un mobilie) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Piemērs navigācijas izkārtojuma maiņai */
        display: flex;
        flex-direction: column;
    }
}

/* Stili ekrāniem līdz 480px platumā (piemēram, mobilie telefoni) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    attēls {
        /* Attēli aizņem visu konteineru platumu */
        max-width: 100%;
        height: auto;
    }
}

Adaptīvā izkārtojuma mērķis ir nodrošināt ērtu vietnes lietošanu jebkurā ierīcē bez nepieciešamības izveidot atsevišķas lapu versijas.

Testēšana ietver:

• Pareizu elementu attēlojumu dažādās izšķirtspējās.
• Navigācijas un mijiedarbības ērtumu.
• Horizontālas ritināšanas trūkumu.
• Teksta lasāmību.
• Lapas ielādes veiktspēju.