Responzivní design

00:00:00

Dnes web navštěvují lidé z telefonů, tabletů, laptopů i velkých monitorů. Responzivní design znamená, že stránka vypadá dobře a je dobře použitelná na všech těchto zařízeních – aniž bys musel vytvářet samostatné verze webu.

Viewport meta tag

Prvním krokem k responzivnímu webu je správný viewport meta tag v sekci <head>. Bez něj mobily zobrazují stránku jako zmenšenou verzi desktopu:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tento tag říká prohlížeči: „Šířka stránky je šířka zařízení, nezmenšuj ji." Měl by být na každé stránce bez výjimky.

Media queries

Media query je podmínka v CSS: „Toto pravidlo platí, pouze pokud…" Nejčastěji se používá pro přizpůsobení podle šířky obrazovky:

/* Výchozí styly – platí pro všechna zařízení */
.kontejner {
  display: flex;
  flex-direction: column;
}

/* Pro obrazovky širší než 768px */
@media (min-width: 768px) {
  .kontejner {
    flex-direction: row;
  }
}

/* Pro obrazovky širší než 1200px */
@media (min-width: 1200px) {
  .kontejner {
    max-width: 1100px;
    margin: 0 auto;
  }
}

Media queries se píší na konec souboru nebo za definici výchozích stylů – pozdější pravidlo má vyšší prioritu.

Přístup mobile-first

Existují dva přístupy: desktop-first (nejdříve napíšeš styly pro desktop a pak je přepisuješ pro menší obrazovky) a mobile-first (nejdříve napíšeš styly pro mobil a pak přidáváš složitost pro větší obrazovky).

Dnes se doporučuje mobile-first: začni od nejmenšího zařízení a postupuj nahoru pomocí min-width. Výhody:

  • Mobilní uživatelé načtou jen nezbytné styly, nezatěžují se nepoužívanými desktopovými pravidly.
  • Nutí tě přemýšlet o tom, co je skutečně důležité – na malé obrazovce musíš prioritizovat obsah.
  • Obvykle vede k čistšímu a přehlednějšímu kódu.

Relativní jednotky

Pevné pixelové hodnoty jsou nepřítelem responzivního designu. Místo nich používej relativní jednotky:

  • % – procento z nadřazeného prvku. Ideální pro šířky: width: 100% zaplní celou dostupnou šířku.
  • vw a vh – procento ze šířky / výšky viewportu. 100vw je celá šířka okna prohlížeče.
  • rem – relativní vůči kořenové velikosti písma. Pro texty, marginy a paddingy.
  • min(), max(), clamp() – moderní CSS funkce pro hodnoty s horní a dolní hranicí:
/* Šířka: minimálně 300px, maximálně 800px, jinak 80% */
.karta {
  width: clamp(300px, 80%, 800px);
}

/* Velikost písma: plynule roste od 1rem do 1.5rem */
h1 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

Responzivní obrázky

Obrázky se na různých zařízeních musí chovat pružně. Základní pravidlo:

img {
  max-width: 100%;
  height: auto;
}

Tímto zajistíš, že obrázek nikdy nepřesáhne šířku svého kontejneru, ale zároveň nebude zbytečně roztažen.

Tip od Zdeňka

Zdeněk radí: Testuj na opravdových zařízeních, nejen v nástrojích prohlížeče. Emulace v DevTools se může chovat jinak než skutečný telefon – obzvlášť při práci s dotykovou navigací. A nezapomínej, že responzivní design není jen o šířce obrazovky. Patří k němu i tmavý režim (prefers-color-scheme), redukce pohybu (prefers-reduced-motion) nebo přístupné ovládání klávesnicí na všech velikostech obrazovky.