Mi az az adaptív verziója az oldalnak?

Az alkalmazkodó tervezés egy webfejlesztési megközelítés, amelyben az oldal dizájnja és tartalma automatikusan igazodik a felhasználó eszközének képernyőméretéhez (asztali, tablet, okostelefon).

Alapelvek:

• Rugalmas rács (Fluid Grids): Az elemek méretének meghatározásához százalékokat vagy más relatív egységeket használunk a fix pixelek helyett.
• Rugalmas képek (Flexible Images): A képek arányosan méreteződnek, hogy ne lépjenek túl a konténeren.
• Média lekérdezések (Media Queries): CSS szabályok, amelyek lehetővé teszik különböző stílusok alkalmazását az eszköz jellemzői szerint, mint például a képernyő szélessége, magassága, orientációja és felbontása.

CSS példák media query használatára:

/* Általános stílusok minden eszközre */
body {
    font-size: 16px;
}

/* Stílusok 768px szélességig terjedő képernyőkhöz (pl. tabletek és mobilok) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Navigációs elrendezés módosítása például */
        display: flex;
        flex-direction: column;
    }
}

/* Stílusok 480px szélességig terjedő képernyőkhöz (pl. mobiltelefonok) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* A képek a konténer teljes szélességét foglalják el */
        max-width: 100%;
        height: auto;
    }
}

Az alkalmazkodó dizájn célja, hogy minden eszközön kényelmesen használható legyen az oldal anélkül, hogy külön verziókat kellene készíteni.

Az alkalmazkodó verzió tesztelése magában foglalja:

• A különböző felbontásokon való helyes megjelenítést.
• A navigáció és interakciók könnyűségét.
• A horizontális görgetés hiányát.
• A szöveg olvashatóságát.
• Az oldal betöltési teljesítményét.