Breakpointy, které skutečně fungují
Jak zvolit správné breakpointy pro vaše projekty. Jde o víc než jen 768px — musíte znát svou cílovou skupinu a zařízení.
Proč jsou správné breakpointy důležité
Není to jenom o tom, že se váš web zobrazuje na mobilu. Je to o tom, aby se zobrazoval správně . Spousta vývojářů si vezme výchozích 768px a 1024px a myslí si, že je hotovo. Ale když se podíváte na reálná data o zařízeních, kterými lidé skutečně surfují, zjistíte, že je to komplikovanější.
Správný breakpoint není magické číslo. Je to bod, kde váš obsah přestává vypadat dobře a potřebuje se přestrukturovat. Někdy je to 600px, někdy 920px. Záleží na tom, jak je obsah složitý a jak se chová na různých zařízeních.
Jaké zařízení vlastně používají vaši uživatelé
V České republice jsou nejčastěji používané rozlišení obrazovky následující: Android telefony s rozlišením kolem 360–390px, iPhony kolem 375–390px, tablety iPad s 768px a počítače s 1280px a vyšší. To není přesný seznam — jsou tu výjimky. Ale pokud máte analytics, podívejte se sami.
Klíčová věc: nezačínejte s breakpointy. Začněte s obsahem. Napište obsah, dejte mu základní styling a pak si hrubě zoom-ните okno prohlížeče. Kde se to začíná lámat? Tam je váš breakpoint. Tímto způsobem vytvoříte breakpointy, které skutečně fungují pro váš obsah, ne jen tak tak pro nějakéandom číslo.
Praktický tip
Začněte psát CSS pro nejmenší obrazovku (mobilní), pak přidávejte breakpointy směrem nahoru. To se jmenuje mobilní-first přístup a dělá z vás lepšího vývojáře.
Jak si definovat své vlastní breakpointy
Napište obsah bez stylů
Začněte se základním HTML a základním CSS. Nech obsah, aby byl přírodně pružný. Nepoužívejte fixní šířky. Jen nechte obsah vytékat na obrazovce přirozeně.
Zmenšujte okno a pozorujte
Otevřete si DevTools, nastavte si mobilní náhled a začněte zmenšovat okno. Kde se obsah přestává dívat dobře? Kde se řádky stávají příliš dlouhými? Kde se tlačítka dotýkají jedna druhé?
Přidejte media query na tu velikost
Jakmile vidíte, že obsah potřebuje nový layout, zapište si to číslo a vytvořte media query. Třeba
@media (min-width: 640px)
nebo
@media (min-width: 920px)
. Upravte CSS tak, aby obsah vypadal lépe.
Otestujte na reálných zařízeních
DevTools je v pořádku, ale není to totéž. Vezměte si telefon svého kolegy nebo své vlastní zařízení a podívejte se, jak to opravdu vypadá. Dotyk funguje jinak než myš. Obsah se chová jinak na 4palcovém displeji.
Konkrétní breakpointy, které doporučujeme
Pokud chcete začít někde rozumném, tady jsou breakpointy, které fungují pro většinu projektů v České republice. Nejsou to správná čísla — správná čísla jsou ta, která fungují pro váš obsah. Ale tady je dobrý základ:
Mobile: 320px – 639px
Nejmenší mobilní telefony. Jeden sloupec, velkých dotyková pole, jednoduchý layout. Bez toho, aby to bylo složité.
Tablet: 640px – 1023px
iPad a větší mobily. Tady můžete začít s dvěma sloupci, ale buďte opatrní. Někdo drží tablet na výšku, někdo na šířku.
Desktop: 1024px a výše
Počítač s myší. Tady se může obsah více rozvinout. Tři sloupce jsou OK. Navigace se změní z hamburger menu na horizontální.
Chyby, kterým se chcete vyhnout
Příliš mnoho breakpointů
Máte breakpoint na každých 100px? To je příliš. Obsah se pak chová nepředvídatelně. Držte se tří až čtyř hlavních breakpointů a upravujte malé věci flexboxem a relativními jednotkami.
Pouze mobilní breakpoint
Breakpoint na 768px je všude. Ale je to jen proto, že je to stará iPad šířka. Máte tablety o 600px, telefony o 390px. Jeden breakpoint nestačí.
Fixní šířky všude
Obsah, který má fixní šířku 600px, nikdy nebude opravdu responzivní. Používejte procenta, clamp() a relativní jednotky. Flexbox a Grid vám pomohou bez hardcoded breakpointů.
Zapomínání na dotyk
Na mobilu nemáte myš. Tlačítka musí být větší. Hover stavy nefungují. Odkazy potřebují víc místa mezi sebou, aby se nedotýkaly. Myslete na dotek, ne na myš.
Závěr: Testujte, ne hádejte
Nejlepší breakpoint je ten, který funguje pro váš obsah. Není to 768px nebo 1024px. Je to bod, kde se obsah láme a potřebuje nový layout. Najdete ho tak, že si vezete si obsah, budete ho zmenšovat a pozorovat, kde se věci kazí.
Mobilní-first přístup vám pomůže myslet lépe. Začněte od nejmenší obrazovky a přidávejte breakpointy směrem nahoru. Tímto způsobem vytvoříte weby, které opravdu fungují na všech zařízeních — ne jenom vypadají, že fungují.
A pamatujte: DevTools vám pomůže, ale reálná zařízení jsou lepší. Vezměte si chvíli a otestujte svou práci na telefonu nebo tabletu. Budete překvapeni, jak moc to změní váš pohled na responzivní design.
Připraveni zkusit mobile-first přístup?
Podívejte se na naši příručku o fluidních rozloženích a dozvíte se, jak psát CSS, které se přizpůsobuje bez breakpointů.
Číst o fluidních rozloženích
Poznámka k obsahu
Tento článek poskytuje informace o designu a vývoji webových stránek. Konkrétní volby breakpointů se mohou lišit v závislosti na vašem projektu, cílové skupině a obsahem. Vždy testujte svou práci na reálných zařízeních a s reálnými uživateli. Doporučujeme konzultovat webové standardy a accessibility guidelines pro nejlepší výsledky.
