NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

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.

Dnes se naučíme používat media queries, což jsou v podstatě podmínky v CSS stylech, které umožňují aktivaci a deaktivaci různých stylů 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.

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ž-li 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ů, metoda odrazuje kvůli její 'vyšší náročnosti' na pochopení. Nesmysl, jen jsou líní a nechce se jim přemýšlet.

Mobile first je výhodná metoda - 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

CSS3 nám umožňuje definovat podmínky, tzv. media queries, kdy se daný styl aplikuje na elementy. Pomocí breakpointů definujeme, od jaké šířky zařízení se má styl aplikovat. Hned si to ukážeme.

Viewport

Abychom vůbec mohli webové stránky na mobilních zařízeních spustit, budeme potřebovat upravit viewport. Ten nastavíme meta tagem, který vložíme někam do HTML hlavičky - úplně jedno kam. 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.

Mým osvědčeným nastavením je toto.

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

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.

Porovnání

Pojďme si tedy ukázat krátké porovnání.

Budeme mít např. nějakou jednoduchou galerii, která bude pro počítače ve dvou sloupcích. Pro mobily budeme chtít jedno-sloupcové rozložení. (Pro jednoduchost zatím vynecháme různé marginy, paddingy a podobně.)

Metodou desktop first bychom napsali asi tento kód:

.galerie img {
  width: 50%;
  float: left;
}

@media screen and (max-width: 700px) {
  .galerie img {
    width: 100%;
    float: none;
  }
}

Metodou mobile first bychom napsali jen tento kód:

@media screen and (min-width: 700px) {
  .galerie img {
    width: 50%;
    float: left;
  }
}

Všimněte si, že u desktop first musíme několik stylů vyresetovat na výchozí hodnotu, která je právě roztažení přes celou šířku. Při složitějších stylech je to ale poměrně obtížné a proto se nám u této metody může často design rozsypat kvůli zapomenutému stylu. U mobile first však nic resetovat nemusíme a jen jednoduše nastavíme nové hodnoty pro desktop. Pro mobilní telefon je necháme výchozí.

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.

HTML kód by mohl vypadat nějak takto:

<div>
  <article class="clanek"></article>
  <aside class="postranni-panel"></aside>
  <aside class="postranni-panel"></aside>
</div>

A CSS kód s využitím mobile first by mohl vypadat následovně:

.clanek {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin: 20px 0;
  padding: 15px;
  background: blue;
}

.postranni-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
  background: red;
}

@media screen and (min-width: 900px) {
  .clanek {
    width: 79%;
    float: left;
  }

  .postranni-panel {
    width: 19%;
    float: right;
  }
}

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ám 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:

Responzivní webdesign

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

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

Responzivní webdesign

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

Flexibilnost

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, em, rem...), ale využíváte především procenta (%). Bavíme se především o šířce elementů.

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

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.


 

Předchozí článek
Úvod do responzivního webdesignu
Všechny články v sekci
Responzivní webdesign
Přeskočit článek
(nedoporučujeme)
Responzivní menu
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
518 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity