Co je to adaptivní verze stránky?

Responzivní návrh je přístup ve vývoji webových stránek, při kterém se design a obsah stránky automaticky přizpůsobují velikosti obrazovky zařízení uživatele (desktop, tablet, smartphone).

Hlavní principy:

• Pružné mřížky (Fluid Grids): Použití procent nebo jiných relativních jednotek k určení velikosti prvků namísto pevných pixelů.
• Pružné obrázky (Flexible Images): Pomocí proporcionálního změny velikosti obrázků tak, aby nepřesahovaly kontejner.
• Media Queries: CSS pravidla umožňující aplikovat různé styly v závislosti na vlastnostech zařízení, jako je šířka obrazovky, výška, orientace a rozlišení.

Příklad použití media query v CSS:

/* Obecné styly pro všechna zařízení */
body {
    font-size: 16px;
}

/* Styly pro obrazovky do 768px šířky (například tablety a mobilní telefony) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Příklad změny rozložení navigace */
        display: flex;
        flex-direction: column;
    }
}

/* Styly pro obrazovky do 480px šířky (například mobilní telefony) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Obrázky zabírají celou šířku kontejneru */
        max-width: 100%;
        height: auto;
    }
}

Cílem responzivního návrhu je zajistit pohodlné používání webu na jakémkoli zařízení bez nutnosti vytváření samostatných verzí stránek.

Testování responzivní verze zahrnuje kontrolu:

• Správného zobrazení prvků při různých rozlišeních.
• Snadnosti navigace a interakce.
• Absence horizontálního posuvníku.
• Čitelnosti textu.
• Výkonu načítání stránky.