2. diel - Responzívny webdesign pomocou Media Queries v CSS3

V minulej lekcii, Úvod do responzívneho webdesignu, sme si predstavili responzívny webdesign.

V tomto tutoriáli responzívneho webdesignu sa naučíme používať media queries, čo sú podmienky v CSS, ktoré umožňujú aplikovať rôzne štýly podľa veľkosti obrazovky zariadenia.

Desktop-first vs. mobile-first prístup

K responzívnemu webdesignu môžeme pristupovať pomocou dvoch základných prístupov.

Desktop-first

Keď sa povie responzívny web, väčšina z nás si predstaví web vytvorený pre desktopy, ktorý sa následne upraví pre mobilné zariadenia. Takto začínal každý – je to ľahké a pomerne efektívne. V podstate tvoríme normálnu stránku, tak ako sme sa to učili, a prenastavujeme elementy podľa pravidiel pre menšie šírky.

Metóda má však jeden zásadný problém. Zmena rozloženia webu pre rôzne zariadenia je dosť zložitá a vyžaduje prepisovanie veľkej časti kódu – a my určite nechceme písať veľa kódu, však? Navyše často dochádza k nekorektnému zobrazeniu. Veď to poznáme – niečo sa zobrazí dobre, niečo zase nie – des a hrôza. Je to okrem iného tým, že blokové elementy majú v predvolenom stave šírku auto a v bežnom toku zvyčajne využijú dostupnú šírku svojho kontajnera. Pri desktop-first prístupe ich často najprv zúžime a na menších zariadeniach potom ich šírku znovu prepisujeme.

Mobile-first

Mobile-first je metóda tvorby webu, ktorá vyžaduje trochu iné myslenie. Metóda využíva v podstate opačný postup ako desktop-first. Z toho teda vyplýva, že sa začína od zobrazenia pre mobily. A verte či nie, je to paráda.

Mnoho ľudí, najmä začiatočníkov, môže mobile-first spočiatku odrádzať, pretože vyžaduje premýšľať od najmenšej obrazovky a postupne štýly rozširovať pre väčšie.

Mobile-first je výhodný prístup, ktorý ušetrí veľa času a hlavne napíšeme oveľa menej kódu, ktorý sa tak stane aj výrazne prehľadnejším.

Breakpointy a media queries

CSS umožňuje definovať podmienky pomocou tzv. media queries, kedy sa daný štýl aplikuje podľa typu zariadenia alebo rozmerov obrazovky. Pomocou tzv. breakpointov určujeme, od akej šírky alebo výšky obrazovky sa má štýl aktivovať. Najčastejšie sa testuje šírka zobrazenia stránky v prehliadači (viewportu):

@media (min-width: 768px) {
  /* Styles for tablets and larger screens */
}

Okrem šírky môžeme dnes reagovať tiež na:

• výšku (min-height, max-height),
• orientáciu displeja (orientation: landscape),
• hustotu pixelov (min-resolution),
• používateľské preferencie (prefers-color-scheme: dark).

Viewport

Aby sa web na mobilných zariadeniach vykresľoval v šírke zariadenia a breakpointy fungovali správne, musíme nastaviť viewport. Ten nastavíme meta tagom, ktorý vložíme do HTML hlavičky – ideálne čo najskôr. Ten v podstate nastaví reálnu šírku displeja, ktorú si internetové prehliadače v mobilných zariadeniach rady upravujú podľa seba.

Odporúčané nastavenie je nasledujúce:

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

Poďme si tento meta tag vysvetliť:

• width=device-width – nastaví šírku viewportu na skutočnú šírku displeja,
• viewport-fit=cover – zabezpečí správne zobrazenie na zariadeniach s výrezom displeja (napr. iPhone),
• initial-scale=1.0 – zabráni automatickému zoomovaniu pri načítaní stránky.

Box-sizing

Budeme využívať vlastnosť box-sizing. Najčastejšie sa používa s hodnotou border-box, čo nám mení rozpätie šírky elementu a počíta do neho aj padding a border. Môžeme teda napríklad nastaviť šírku na 500px, pridať padding či border a element bude mať konečne šírku naozaj len 500px.

Odporúčané nastavenie na začiatku projektu:

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

Porovnanie

Poďme si teda ukázať krátke porovnanie prístupov desktop-first a mobile-first. Budeme mať jednoduché rozloženie blokov (predstavujúcich napríklad galériu, články...), ktoré budú na počítači zobrazené v dvoch stĺpcoch a na mobile v jednom stĺpci.

Je dôležité uvedomiť si, že blokové elementy majú v HTML v predvolenom stave šírku auto a v bežnom toku zvyčajne využijú dostupnú šírku svojho kontajnera. To znamená, že rozloženie do jedného stĺpca je prirodzené predvolené správanie.

Metódou desktop-first by sme napísali asi tento kód:

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

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

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

Metódou mobile-first by sme napísali tento kód:

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

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

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

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

Všimnime si, že pri desktop-first často musíme niektoré vlastnosti pre menšie šírky prepísať späť na prirodzené predvolené správanie (napr. roztiahnutie cez dostupnú šírku). Pri zložitejších štýloch to môže byť náročné a dizajn sa potom môže "rozsypať" kvôli zabudnutému prepisu. Pri mobile-first naopak typicky nechávame základný (mobilný) stav jednoduchší a zmeny pridávame až pre väčšie viewporty.

Ukážka mobile-first

Ukážeme si ešte jeden príklad, teraz iba s metódou mobile-first, pretože je to zatiaľ najefektívnejšia metóda na štýlovanie responzívnych stránok. Preto sa tiež ostatnými metódami už zaoberať nebudeme.

Vytvoríme si jednoduché štýly pre stránku s elementmi pre jeden článok a dva bočné panely. V priečinku responsive_website/ otvoríme vo VS Code súbor index.html a upravíme ho do tejto podoby:

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0">
    <title>Mobile-first layout example</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="layout">
        <article class="article">Article</article>
        <aside class="side-panel">Panel 1</aside>
        <aside class="side-panel">Panel 2</aside>
    </div>
</body>

</html>

Následne vytvoríme nový súbor style.css, ktorého obsah bude s využitím mobile-first vyzerať nasledovne:

/* Reset box-sizing for all elements */
*,
*::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;
}

.article,
.side-panel {
  min-height: 100px;
  padding: 15px;
  color: white;
  border-radius: 6px;
}

.article {
  background: #0077b6;
}

.article h2 {
  margin-top: 0;
}

.side-panel {
  background: #ef476f;
}

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

/* From 900 px width - place elements side by side */
@media (min-width: 900px) {
  .layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .article {
    flex: 2;
  }

  .side-panel {
    flex: 1;
  }
}

Vždy sa budeme snažiť vytvárať samostatné komponenty, ktoré nie sú závislé od konkrétneho elementu či pozície v HTML stránke, ale to už trochu predbiehame a viac si o tom povieme v článku o objektovom CSS.

Pri malej obrazovke dostaneme nasledujúci efekt:

Rozloženie na malých displejoch.

A pri väčšej obrazovke dostaneme inak rozmiestnené elementy:

Rozloženie na veľkých displejoch.

Flexibilnosť

V ére responzívnych webov metódou desktop-first sme mohli vidieť skôr fixné hodnoty pre šírku v každom @media rozmedzí. V metóde mobile-first sa však často využíva kombinácia responzívnosti a flexibilnosti, teda nenastavujeme pevné hodnoty (px), ale používame flexibilné jednotky, ako sú percentá (%), relatívne (em, rem) alebo viewportové (vw, vh). Tieto jednotky umožňujú, aby sa prvky prirodzene prispôsobovali veľkosti obrazovky a zachovali použiteľnosť na všetkých zariadeniach.

Bavíme sa predovšetkým o šírke a rozložení elementov, ktoré sa vďaka tomu plynulo menia podľa dostupného priestoru. Napríklad:

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

Tento zápis zabezpečí, že veľkosť textu sa plynulo mení podľa šírky obrazovky, ale nikdy neklesne pod 1rem a neprekročí 1.5rem.

Snažíme sa stránky robiť flexibilné od najmenších displejov až po najväčšie. Ak na webe samozrejme chceme pevné hodnoty, tak ich použijeme.

Záver

Tvorba naozaj dobre responzívnej stránky fungujúcej naprieč prehliadačmi rozhodne nie je prechádzka ružovou záhradou. Snažíme sa teda využívať efektívne riešenia a vyhýbať sa veciam, ktoré nás obmedzujú a sťažujú nám prácu.

Existujú tiež takzvané CSS/front-end frameworky, ako napr. Bootstrap, ktoré nám (okrem iného) môžu pomôcť k ľahkému responzívnemu dizajnu – hľadajme grid systém.

V ďalšej lekcii, Responzívne menu, si vytvoríme jednoduché responzívne menu metódou mobile-first. Povieme si, na čo si dávať pozor a akým spôsobom zaistiť čo najlepší chod.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.