Kas yra puslapio adaptatyvi versija?

Adaptatyvus maketas yra požiūris į interneto kūrimą, kai puslapio dizainas ir turinys automatiškai prisitaiko prie naudotojo įrenginio ekrano dydžio (darbalaukis, planšetė, išmanusis telefonas).

Pagrindiniai principai:

• Lanksti tinklelis (Fluid Grids): Naudojama procentinė arba kita santykinė vienetų reikšmė elementų dydžių nustatymui vietoje fiksuotų pikselių.
• Lankstūs vaizdai (Flexible Images): Paveikslėlių dydžio keitimas proporcingai, kad jie neišeitų už konteinerio ribų.
• Medijos užklausos (Media Queries): CSS taisyklės, leidžiančios taikyti skirtingus stilius priklausomai nuo įrenginio savybių, tokių kaip ekrano plotis, aukštis, orientacija ir raiška.

CSS medijos užklausos pavyzdys:

/* Bendra stiliai visiems įrenginiams */
body {
    font-size: 16px;
}

/* Stiliai ekranams iki 768px pločio (pvz., planšetės ir mobilieji) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Pavyzdys, kaip keisti navigacijos maketą */
        display: flex;
        flex-direction: column;
    }
}

/* Stiliai ekranams iki 480px pločio (pvz., mobilieji telefonai) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Vaizdai užima visą konteinerio plotį */
        max-width: 100%;
        height: auto;
    }
}

Adaptatyvaus maketo tikslas – užtikrinti patogų svetainės naudojimą bet kuriame įrenginyje be būtinybės kurti atskiras puslapių versijas.

Testavimas apima:

• Tinkamą elementų rodymą skirtinguose sprendimuose.
• Patogią navigaciją ir sąveiką.
• Horizontalios slinkties nebuvimą.
• Teksto skaitomumą.
• Puslapio įkėlimo našumą.