Lekce 2 - Responzivní webdesign pomocí Media Queries v CSS 3

V minulé lekci, Úvod do responzivního webdesignu, jsme se uvedli do responzivního webdesignu.

V tomto tutoriálu responzivního webdesignu se naučíme používat media queries, což jsou podmínky v CSS, které umožňují aplikovat různé styly podle velikosti obrazovky zařízení.

Desktop-first vs. mobile-first přístup

K responzivnímu webdesignu můžeme přistupovat pomocí dvou základních přístupů.

Desktop-first

Když se řekne responzivní web, většina z nás si představí web vytvořený pro desktopy, který se následně upraví pro mobilní zařízení. Takto začínal každý - je to lehké a poměrně efektivní. V podstatě tvoříme normální stránku, tak jako jsme se to učili, a přenastavujeme elementy podle pravidel pro menší šířky.

Metoda má však jeden zásadní problém. Změna rozvržení webu pro různá zařízení je dost složitá a vyžaduje přepisování velké části kódu - a my určitě nechceme psát hodně kódu, že? Navíc často dochází k nekorektnímu zobrazení. Však to znáte - něco se zobrazí dobře, něco zase ne - děs a hrůza. Je to mimo jiné tím, že blokové prvky mají ve výchozím stavu šířku 100 %, kterou musíme u desktop-first přístupu nejprve změnit a na menších zařízeních ji pak znovu přepisovat.

Mobile-first

Mobile-first je metoda tvorby webu, která vyžaduje trochu jiné myšlení. Metoda využívá v podstatě opačného postupu, než desktop-first. Z toho tedy vyplývá, že se začíná od zobrazení pro mobily. A věřte nebo ne, je to paráda.

Mnoho lidí, zvláště pak začátečníků, může mobile-first zpočátku odrazovat, protože vyžaduje přemýšlet od nejmenší obrazovky a postupně styly rozšiřovat pro větší.

Mobile-first je výhodný přístup, který ušetří mnoho času a hlavně napíšete mnohem méně kódu, který se tak stane i výrazně přehlednějším.

Breakpointy a media queries

CSS umožňuje definovat podmínky pomocí tzv. media queries, kdy se daný styl aplikuje podle typu zařízení nebo rozměrů obrazovky. Pomocí tzv. breakpointů určujeme, od jaké šířky nebo výšky obrazovky se má styl aktivovat. Nejčastěji se testuje šířka zobrazení stránky v prohlížeči (viewportu):

@media (min-width: 768px) {
  /* Styly pro tablety a větší obrazovky */
}

Kromě šířky můžete dnes reagovat také na:

• výšku (min-height, max-height),
• orientaci displeje (orientation: landscape),
• hustotu pixelů (min-resolution),
• uživatelské preference (prefers-color-scheme: dark).

Viewport

Aby se web na mobilních zařízeních vykresloval v šířce zařízení a breakpointy fungovaly správně, musíme nastavit viewport. Ten nastavíme meta tagem, který vložíme do HTML hlavičky - ideálně co nejdříve. Ten v podstatě nastaví reálnou šířku displeje, kterou si internetové prohlížeče v mobilních zařízeních rády upravují podle sebe.

Doporučené nastavení je následující:

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

Pojďme si tento meta tag vysvětlit:

• width=device-width - nastaví šířku viewportu na skutečnou šířku displeje,
• viewport-fit=cover - zajistí správné zobrazení na zařízeních s výřezem displeje (např. iPhone),
• initial-scale=1.0 - zabrání automatickému zoomování při načtení stránky.

Box-sizing

Budeme využívat vlastnost box-sizing. Nejčastěji se používá s hodnotou border-box, což nám mění rozpětí šířky elementu a počítá do něj i padding a border. Můžeme tedy třeba nastavit šířku na 500px, přidat padding či border a element bude mít konečně šířku opravdu jen 500px.

Doporučené nastavení na začátku projektu:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Porovnání

Pojďme si tedy ukázat krátké porovnání přístupů desktop-first a mobile-first. Budeme mít jednoduché rozložení bloků (představující například galerii, články, ...), které budou na počítači zobrazeny ve dvou sloupcích a na mobilu v jednom sloupci.

Je důležité si uvědomit, že blokové elementy v HTML se ve výchozím stavu roztahují přes celou dostupnou šířku (chovají se podobně jako width: 100 %). To znamená, že rozložení do jednoho sloupce je přirozené výchozí chování.

Metodou desktop-first bychom napsali asi tento kód:

.bloky {
  display: flex;
  flex-wrap: wrap;
}

.blok {
  flex: 1 1 50%;
  background: lightblue;
  text-align: center;
  padding: 20px;
  min-height: 100px;
}

@media (max-width: 700px) {
  .blok {
    flex-basis: 100%;
  }
}

Metodou mobile-first bychom napsali tento kód:

.bloky {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blok {
  background: lightblue;
  text-align: center;
  padding: 20px;
  min-height: 100px;
}

@media (min-width: 700px) {
  .bloky {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blok {
    flex: 1 1 48%;
  }
}

Všimněte si, že u desktop-first často musíme některé vlastnosti pro menší šířky přepsat zpět na přirozené výchozí chování (např. roztažení přes celou šířku). Při složitějších stylech to může být náročné a design se pak může "rozsypat" kvůli zapomenutému přepisu. U mobile-first naopak typicky necháváme základní (mobilní) stav jednodušší a změny přidáváme až pro větší viewporty.

Ukázka mobile-first

Ukážeme si ještě jeden příklad, nyní pouze s metodou mobile-first, jelikož je to zatím nejefektivnější metoda pro stylování responzivních stránek. Proto se také ostatními metodami již zabývat nebudeme.

Vytvoříme si jednoduché styly pro stránku s elementy pro jeden článek a dva postranní panely. Ve složce responzivni_web/ otevřeme ve VS Code soubor index.html a upravíme ho do této podoby:

<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0">
    <title>Ukázka mobile-first layoutu</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="layout">
        <article class="clanek">Článek</article>
        <aside class="postranni-panel">Panel 1</aside>
        <aside class="postranni-panel">Panel 2</aside>
    </div>
</body>

</html>

Následně vytvoříme nový soubor style.css, jehož obsah bude s využitím mobile-first vypadat následovně:

/* Reset box-sizing pro všechny elementy */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.clanek,
.postranni-panel {
  padding: 15px;
  color: white;
  border-radius: 6px;
}

.clanek {
  background: #0077b6;
  min-height: 200px;
}

.clanek h2 {
  margin-top: 0;
}

.postranni-panel {
  background: #ef476f;
  min-height: 100px;
}

.postranni-panel h3 {
  margin-top: 0;
}

/* Od šířky 900 px – rozložení vedle sebe */
@media (min-width: 900px) {
  .layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .clanek {
    flex: 2;
  }

  .postranni-panel {
    flex: 1;
  }
}

Vždy se budeme snažit vytvářet samostatné komponenty, které nejsou závislé na konkrétním elementu či pozici v HTML stránce, ale to už trochu předbíháme a více si o tom popovídáme v článku o objektovém CSS.

Při malé obrazovce dostaneme následující efekt:

Rozložení na malých displejích.

A při větší obrazovce dostaneme jinak rozmístěné elementy:

Rozložení na velkých displejích.

Flexibilita

V éře responzivních webů metodou desktop-first jste mohli vidět spíše fixní hodnoty pro šířku v každém @media rozmezí. V metodě mobile-first se však často využívá kombinace responzivnosti a flexibilnosti, tedy nenastavujete pevné hodnoty (px), ale používáte flexibilní jednotky, jako jsou procenta (%), relativní (em, rem) nebo viewportové (vw, vh). Tyto jednotky umožňují, aby se prvky přirozeně přizpůsobovaly velikosti obrazovky a zachovaly použitelnost na všech zařízeních. Bavíme se především o šířce a rozložení elementů, které se díky tomu plynule mění podle dostupného prostoru. Například:

p {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

Tento zápis zajistí, že velikost textu se plynule mění podle šířky obrazovky, ale nikdy neklesne pod 1 rem a nepřekročí 1.5 rem.

Snažte se stránky dělat flexibilní od nejmenších displejů až po největší. Pokud na webu samozřejmě chcete pevné hodnoty, tak je použijte.

Závěr

Tvorba opravdu dobře responzivní stránky fungující napříč prohlížeči rozhodně není procházka růžovou zahradou. Snažte se tedy využívat efektivních cest a vyhněte se věcem, které vás omezují a znesnadňují vám práci.

Existují také takzvané CSS/front-end frameworky, jako např. Bootstrap, které vám (mimo jiné) mohou pomoci ke snadnému responzivnímu designu - hledejte grid systém.

V další lekci, Responzivní menu, si vytvoříme jednoduché responzivní menu metodou mobile-first. Řekneme si, na co si dávat pozor a jakým způsobem zajistit co nejlepší chod.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.