Breakpointy

Breakpointy neboli body zlomu v CSS jsou body, ve kterých obsah webu reaguje na šířku zařízení, což umožňuje zobrazit uživateli nejlepší možné rozložení.

V tomto příkladu vidíte, jak se rozvržení přizpůsobuje velikosti obrazovky. Při velkém rozlišení má rozvržení záhlaví a dva sloupce těla, ale v malém zařízení se změní na rozvržení jednoho sloupce. Bod ve kterém se tak stane je breakpoint.

Hodnoty breakpointů

CSS solidpixels má definováno 8 základních breakpointů. Ty mají své „max“ varianty. Některé jsou pro změnu layout více významné, než ostatní. Jde hlavně o breakpointy 720 px (screen-md) a 993 px (screen-lg).

Speciální breakpointy

Existuje ještě další „sémanticky“ významemný breakpoint – nav-breakpoint. Jak název napovídá, jde o bod, kdy se mění mobilní hlavička na desktopovou/tabletovou verzi. Tento bod lze nastavit v rámci nastavení hlavičky.

Proč bych měl/a vědět o breakpointech

Breakpointy jsou důležité, abychom dosáhli dobrého responzivity webu. V případě, že stavím web na solidpixels se hodí vědět, kdy se komponenty přepínají na jiný layout. Tak budu znát lépe kritická místa, která pak mohu ovlivnit pomocí responzivních tříd. V takových místech se ze sloupců mohou vytvářet dlouhé „nudle“, které určitě nevypadají hezky.

Designéra by měl breakpoint zajímat hlavně v situaci návrhu webu. Je lepší mít povědomí o breakpointech už při návrhu webu, protože se tak může předejít designovým úpravám a následně tak ušetřit čas.

V ideálním případě jsou breakpointy neměnné. Technicky je samozřejmě možné breakpointy změnit, ale vyžaduje to velké zásahy do existující codebase, které pak mohou zapříčinit nekonzistentnost ve fungování webu postaveném na solidpixels.

Příklady

Blok výpis například mění počet sloupců u sm (480 px) breakpointu, následně u md (720 px) breakpointu.

Hlavička se přepíná do plné verze na obrazovkách širších než 720 px (md breakpoint).