Responzivní design

Breakpointy nejsou o názvech zařízení; „tablet“ nemá jednu šířku. Dobrý breakpoint je ten, kde layout přestane fungovat — kde se nadpis produktu láme do tří řádků, kde se dvě karty už nevejdou vedle sebe. Nastavte ho tam a pojmenujte ho, ne `@media (max-width: 767px)` zkopírovanou ze šablony.

Praktická sada pro e-shop: 320 (malý telefon), 640 (velký telefon nebo malý tablet), 1024 (tablet na šířku), 1280 (notebook). Většině projektů to stačí. Víc breakpointů znamená víc kombinací k testování a víc možností, na kterou se zapomene.

Zařízení přestala být jednotkou. Kontejnerové dotazy (`@container`) dovolují, aby karta reagovala na šířku svého kontejneru, ne viewportu — stejná karta pak může být v úzkém sidebaru i v širokém gridu bez variantních props. Protože knihovna komponent už nemusí vědět, kde žije, odstěhovala se tam většina responzivní logiky.

Naopak plynulá typografie a rozestupy přes `clamp()` a moderní layout nahradily mnoho media queries: `min(100%, 40rem)`, `flex-wrap: wrap`, grid s `auto-fit` nahradily dřívější záplatu media queries. A zvětšení na 200 % je požadavek WCAG, takže layout musí držet i tehdy, když se všechno zvětší — ne jen v úzké šířce.

Některé struktury se prostě přizpůsobit nedají. Široká srovnávací tabulka se čtrnácti sloupci nemá poctivou mobilní podobu — převedení na karty skryje samotné srovnání a horizontální scroll je na telefonu nepoužitelný. Tam je správnou odpovědí jiná obrazovka pro malá zařízení, ne chytřejší grid.

Stojí to čas designu a testování. Každá komponenta, která má fungovat ve čtyřech šířkách, potřebuje čtyři otestované stavy a layout, který je dokonalý při 1280 px, se pravidelně láme při 1024 px mezi breakpointy. Řešením je plynulý základ a poctivá kontrola na levném Androidu, ne dlouhý seznam předvoleb zařízení.