Čo je to adaptívna verzia stránky?

Responzívny dizajn je prístup vo vývoji webových stránok, pri ktorom sa dizajn a obsah stránky automaticky prispôsobujú veľkosti obrazovky zariadenia používateľa (desktop, tablet, smartfón).

Hlavné princípy:

• Pružné mriežky (Fluid Grids): Použitie percent alebo iných relatívnych jednotiek na určenie veľkosti prvkov namiesto pevných pixelov.
• Pružné obrázky (Flexible Images): Proporcionálne zmenšenie obrázkov tak, aby nepresahovali kontajner.
• Media Queries: CSS pravidlá, ktoré umožňujú aplikovať rôzne štýly v závislosti od vlastností zariadenia, ako je šírka obrazovky, výška, orientácia a rozlíšenie.

Príklad použitia media query v CSS:

/* Všeobecné štýly pre všetky zariadenia */
body {
    font-size: 16px;
}

/* Štýly pre obrazovky do 768px šírky (napríklad tablety a mobilné telefóny) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Príklad zmeny rozloženia navigácie */
        display: flex;
        flex-direction: column;
    }
}

/* Štýly pre obrazovky do 480px šírky (napríklad mobilné telefóny) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Obrázky zaberajú celú šírku kontajnera */
        max-width: 100%;
        height: auto;
    }
}

Cieľom responzívneho dizajnu je zabezpečiť pohodlné používanie stránky na akomkoľvek zariadení bez nutnosti vytvárania samostatných verzií stránok.

Testovanie responzívnej verzie zahŕňa kontrolu:

• Správneho zobrazenia prvkov pri rôznych rozlíšeniach.
• Jednoduchosti navigácie a interakcie.
• Absencie horizontálneho posúvania.
• Čitateľnosti textu.
• Výkonu načítania stránky.