UX Dizajnzačiatočník

Čo je Breakpoints?

Breakpoints (zlomové body) sú definované šírky obrazovky, pri ktorých sa mení rozloženie webstránky. Pomocou media queries v CSS určujú, kedy sa dizajn prispôsobí rôznym zariadeniam — mobilu, tabletu a desktopu.

Definícia Breakpoints

Čo sú breakpoints

Breakpoints (zlomové body) sú hodnoty šírky viewportu, pri ktorých sa mení rozloženie webstránky. Sú základom responzívneho webového dizajnu (RWD), ktorý predstavil Ethan Marcotte v roku 2010.

Keď šírka obrazovky prekročí alebo klesne pod breakpoint, CSS media query aktivuje iné štýly — napr. zmení 3-stĺpcový layout na 1-stĺpcový, skryje bočný panel alebo zväčší veľkosť písma.

Bežné breakpoints

  • Mobile: 0–639px (predvolený, mobile-first prístup)
  • Tablet: 640px–1023px (sm/md v Tailwind CSS)
  • Desktop: 1024px–1279px (lg v Tailwind CSS)
  • Veľký desktop: 1280px+ (xl/2xl v Tailwind CSS)

Mobile-first vs. desktop-first

Moderný prístup je mobile-first — základné štýly sa píšu pre mobil a breakpoints pridávajú štýly pre väčšie obrazovky (min-width). Desktop-first prístup robí opak (max-width). Mobile-first je preferovaný, pretože väčšina návštevníkov prichádza z mobilných zariadení.

V Tailwind CSS sú breakpoints zabudované: sm:, md:, lg:, xl:, 2xl:. Stačí pridať prefix pred triedu: md:grid-cols-3 zobrazí 3 stĺpce od šírky 768px.

Praktický príklad

Príklad: Pricing sekcia s 3 cenovými balíkmi.

Mobile (do 640px): Balíky pod sebou (1 stĺpec), plná šírka.

Tablet (640–1023px): 2 balíky vedľa seba, tretí pod nimi.

Desktop (1024px+): Všetky 3 balíky vedľa seba v rovnakom riadku.

Tailwind: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 — jeden riadok kódu.

Často kladené otázky

Čo sú breakpoints v responzívnom dizajne?

Breakpoints sú definované šírky obrazovky, pri ktorých sa mení rozloženie webstránky. Určujú, kedy sa dizajn prispôsobí mobilom, tabletom a desktopom.

Koľko breakpointov by mal mať web?

Väčšina webov používa 3–5 breakpointov: mobile, tablet, desktop a prípadne veľký desktop. Presný počet závisí od komplexnosti dizajnu.

Čo znamená mobile-first prístup?

Mobile-first znamená, že základné CSS štýly sa píšu pre mobilné zariadenia. Breakpoints potom pridávajú štýly pre väčšie obrazovky pomocou min-width media queries.

Súvisiace pojmy

Grid System

Grid system (mriežkový systém) je štruktúra neviditeľných vertikálnych stĺpcov a horizontálnych riadkov, ktorá organizuje obsah na webstránke. Zabezpečuje zarovnanie prvkov, konzistentné rozloženie a responzívne správanie.

Spacing System

Spacing system (systém medzier) je súbor pravidiel definujúcich konzistentné medzery medzi prvkami na webe. Typicky používa násobky základnej jednotky (napr. 4px alebo 8px) pre padding, margin a gap.

Design Tokens

Design tokens sú najmenšie jednotky dizajnového systému — pomenované hodnoty pre farby, veľkosti, medzery, tiene a typografiu. Slúžia ako jediný zdroj pravdy pre vizuálny štýl zdieľaný medzi dizajnérmi a vývojármi.

Responzívny dizajn

Responzívny dizajn je prístup k tvorbe webstránok, ktorý zabezpečuje správne zobrazenie na akomkoľvek zariadení — od mobilov cez tablety až po veľké monitory. Využíva flexibilné layouty, obrázky a CSS media queries.

Wireframe

Wireframe je zjednodušený nákres rozloženia webstránky alebo aplikácie bez vizuálneho dizajnu. Zobrazuje štruktúru obsahu, hierarchiu informácií a umiestnenie prvkov pomocou jednoduchých tvarov a placeholderov.

Späť na slovník

Potrebujete pomôcť s webom?

Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.

Napíšte miPozrite moju prácu