Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Python týden

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

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.

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
Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
44 hlasů
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (11)

 

 

Komentáře

Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:17.1.2015 13:13

Na tuto sérii článků se těším :)
, ale odkaz v článku http://sassmeister.com/…651cedcc4f0e mi nefunguje.

 
Odpovědět
17.1.2015 13:13
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na TomasGlawaty
Honza Bittner:17.1.2015 13:45

Správný odkaz http://sassmeister.com/…04d151843f95

Asi mi to napoprvé vygenerovalo špatný...

Odpovědět
17.1.2015 13:45
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:17.1.2015 19:55

Aktualizuj to prosím i v článku.

Odpovědět
17.1.2015 19:55
Neaktivní uživatelský účet
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:17.1.2015 20:26

Čeká to na schválení. ;)

Odpovědět
17.1.2015 20:26
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Honza Bittner
Vojtěch Mašek (Woyta):18.1.2015 1:39

Hezký návod, také jsem chtěl na tohle téma napsat, ale předběhl jsi mě :)

Měl bych jen připomínku k viewport meta tagu, já používám tenhle zápis:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">

Initial scale jsem shledal nepotřebným, jelikož je defaultně 1, tak jsem ho vyhodil. Maximum scale zajistí mimo jiné to, že například na iPadu při orientaci na šířku bude šířka opravdu 1024px (tak jak to má být) a ne 768px což je jeho výchozí chování a narušuje to styl stránky (stránka si pořád myslí že viewport je 768 ale ve skutečnosti se roztáhne na 1024px a například obrázky, třebaže jsou uzpůsobené retina displejům, jsou rozmazané) zkrátka, nechová se to bez tohoto parametru korektně. Také zamykám zvětšování a zmenšování stránky, zastávám názor, že pokud je mobilní verze udělaná dobře, není potřeba zvětšovat.

Editováno 18.1.2015 1:42
Odpovědět
18.1.2015 1:39
Výraz "to nejde" není v mém slovníku
Avatar
qwertyW
Redaktor
Avatar
qwertyW:18.1.2015 7:50

Mám dotaz, jak se rozezná mezi full hd monitorem a full hd telefonem?

Odpovědět
18.1.2015 7:50
Programuji, tedy jsem.
Avatar
Odpovídá na qwertyW
Vojtěch Mašek (Woyta):18.1.2015 23:08

Telefon může mít sice rozlišení Full HD, ale to proto že má retina panel, tzn. reálné rozlišení, které můžeš použít pro stylování bude 960 x 540px. A podle šířky 540px celkem spolehlivě rozpoznáš mobil. Responzivní design ale není jen pro mobily, základní myšlenka je taková, že se obsah přeskupí a vejde do jakékoliv velikosti obrazovky/okna.

Editováno 18.1.2015 23:09
Odpovědět
18.1.2015 23:08
Výraz "to nejde" není v mém slovníku
Avatar
saqe27
Člen
Avatar
saqe27:22.1.2015 9:24

Vďaka za článok, krásne jednoduché ukážky, už sa teším na pokračovanie.

 
Odpovědět
22.1.2015 9:24
Avatar
freearea
Člen
Avatar
freearea:25.1.2015 10:45

Ahoj Hobi,
tvoje články /příspěvky/ nemají chybu.
Držím palce,jen tak dál !!!

 
Odpovědět
25.1.2015 10:45
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:29.3.2015 13:48

Článek mírně poupraven. :)

Odpovědět
29.3.2015 13:48
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
hruska-milan
Člen
Avatar
hruska-milan:10.4.2015 23:38

chci se zeptat jakej framework by jste použili na tvorbu webu - myšleno spíše na tvorbu šablony :)

 
Odpovědět
10.4.2015 23:38
Avatar
Odpovídá na hruska-milan
Tomáš Maňhal:10.4.2015 23:48

Bootstrap a Foundation jsou asi nejrozšířeněj­ší...ale 100 lidí, 100 chutí. Za mě třeba Bootstrap ;-)

 
Odpovědět
10.4.2015 23:48
Avatar
vojtanosek
Člen
Avatar
vojtanosek:16.6.2015 7:29

Tohle sem i bude hodit ale mně se web na androidu zobrazuje stejně jak na počítači :).

 
Odpovědět
16.6.2015 7:29
Avatar
Michal Novák:26.6.2017 16:27

Mohl bych se zeptat (a především prosím o odpověď :-D )? Má responzivní design dnes ještě smysl, když mají obrazovky jak počítačů, tak už i většinou mobilů minimální rozlišení 1920 x 1080?

Ještě bych dodal, že ten graf přístupů na web ze zařízení je už zřejmě zastaralý s tím, že počet přístupů z mobilních telefonů se určitě zvýšil.

 
Odpovědět
26.6.2017 16:27
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Novák
David Čápka:26.6.2017 16:40

Nejde o fyzické rozlišení, ale o tzv. CSS pixels. I fullhd telefon má stejně třeba jen 320px šířku v CSS pixelech.

Odpovědět
26.6.2017 16:40
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na David Čápka
Michal Novák:26.6.2017 18:22

Počkat počkat. I fullhd telefon má stejně třeba jen 320px šířku v CSS pixelech.? Tak to mi asi něco dost důležitého uniklo :-O

Mohl poprosit o podrobnější vysvětlení?

 
Odpovědět
26.6.2017 18:22
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Novák
David Čápka:26.6.2017 19:23

Je to podobné jako s DPI na počítači. Jelikož telefon je malý, tak se jeden pixel bere jako několik fyzických pixelů, jinak bys přeci ani nemohl přečíst text, když má velikost třeba 10px na desktopu, byl by strašně malinký. Na telefonu se 10px font zobrazí třeba 50 fyzických px velký, takže jsou písmena krásně hladká, ale pořád je to velké 10px v CSS. Já tady ty články rozšířím, už to mám dokonce připravené.

Editováno 26.6.2017 19:23
Odpovědět
26.6.2017 19:23
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na David Čápka
Michal Novák:26.6.2017 23:28

Jo takhlééé. Aha. Tak to jo. Díky moc za info! :-)

 
Odpovědět
26.6.2017 23:28
Avatar
Bohuslav Holček:12.7.2018 14:53

http://sassmeister.com/…04d151843f95 odkaz na ukazku jiz nefunguje, ale za ty leta co to tam bylo .... clovek by se divil, ze by to tam drzely..... ukazka je stejne jasna...

 
Odpovědět
12.7.2018 14:53
Avatar
Jan Jurníček:26.11.2018 12:25

Proč zakazovat scalování? Omezujete tím přístupnost svého webu pro uživatele. Vylučujete uživatele se zrakovým postižení, ti si váš web nebudou moci přiblížit, takže pro mnohé z nich bude nečitelný. Já bych to nedoporučoval, tohle bych nechal na uživateli. Viz Tim Kadlec, Responzivní webdesign profesionálně, Zoner Press 2014.

 
Odpovědět
26.11.2018 12:25
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jan Jurníček
Honza Bittner:26.11.2018 17:54

Ahoj, bylo by opravdu lepší vyvarovat se maximum-scale=1, user-scalable=no, případně i initial-scale=1, protože je defaultní. V článku upravím. :-)

Ideálně asi teď používat <meta name="viewport" content="width=device-width, viewport-fit=cover">.

Odpovědět
26.11.2018 17:54
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Tomáš Bajt
Člen
Avatar
Tomáš Bajt:29.7.2019 22:21

Skvělej článek , po dokončení všeho s HTML , CSS se do toho určitě opřu , sice nevím jak moc mi front-end půjde , ale zkusím vše z něho , kdyžtak přesedlám na back-end , to je ale vedlejší.

Mám takovou otázku , není někde seznam jak moc veliké jsou pixely všeho ( tablet , mobil )?
viz.

@media screen and (min-width: 900px)

jak mohu ty px zjistit

Odpovědět
29.7.2019 22:21
Život je jednoduchý, to jen lidé si ho dělají složitým.
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Tomáš Bajt
Jaroslav Smrž:30.7.2019 9:17

Pixely jsou různé. Záleží na DPI (dots per inch - bodů na palec) a každé zařízení to má jinak. Například weby jako takové používají 72dpi. Jinak tyto články jsou již staré. 6 let je na vývoj webu opravdu dlouhá doba. Sice v nich je zmínka o Bootstrap, ale od roku 2013 tento framework urazil dlouho cestu a je podstatně dál. Nauč se tedy spíš Bootstrap a principy LESS, SASS, SCSS než číst zastaralé techniky, ikdyž i v dnešní době občas nastane situace, kdy je třeba si definovat vlastní breakpointy, ale to se stává spíš vyjímečně.

Odpovědět
30.7.2019 9:17
/* Life runs on code */
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Honza Bittner:30.7.2019 9:54

Na nastavování vlastních breakpointů nevidím nic špatného. Záleží tedy, samozřejmě, jaký typ projektu děláš, tedy jak moc customizovaný je. Na generický web se nějaké využití částí Bootstrapu či jiných frameworků jistě hodí, na specifický projekt se spíše hodí vlastní kód.

Odpovědět
30.7.2019 9:54
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Honza Bittner
Jaroslav Smrž:30.7.2019 10:09

Ano, to souhlasím, ale Tomáš Bajt psal v jiném vlákně, že se chce učit back-end, takže co se designu týče, na administrační rozhraní mu bohatě stačí Bootstrap. Při front-endu samozřejmě ne.

Odpovědět
30.7.2019 10:09
/* Life runs on code */
Avatar
Tomáš Bajt
Člen
Avatar
Tomáš Bajt:30.7.2019 10:51

No nějak tak oboje se chci naučit , ale to jsem chtěl později. Díky za radu , zkusím se teda mrknout na bootstrap , ale v tom případě už nemusím koukat na tenhle responzivní webdesign?

Odpovědět
30.7.2019 10:51
Život je jednoduchý, to jen lidé si ho dělají složitým.
Avatar
Lukáš
Redaktor
Avatar
Odpovídá na Tomáš Bajt
Lukáš:30.7.2019 10:55

Ne nemusíš, to se zas mrkni na zdejší tutoriál na bootstrap : https://www.itnetwork.cz/…ku-bootstrap

 
Odpovědět
30.7.2019 10:55
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš Bajt
Honza Bittner:30.7.2019 11:22

Záleží na tom, co chceš umět. Ale pravidlo palce říká, že žádná teorie nikdy nikomu neuškodila. I když budeš používat Bootstrap či jiný framework, většinou se hodí znát proč a jak věci fungují. :-)

Odpovědět
30.7.2019 11:22
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Tomáš Bajt
Člen
Avatar
Tomáš Bajt:30.7.2019 13:20

Ne tak já to špatně přečetl , front-endem ( html ,css ) chci nějak tak začínat a později se přiučit třeba js a php , v tomhle případě se mám podívat na ten bootstrap , nebo se spíš věnovat těmhle vlastním media screenům a responzivitě? ( chtěl jsem to poslat před těmito 2 komentáři , jen mi to zablokovalo )

Odpovědět
30.7.2019 13:20
Život je jednoduchý, to jen lidé si ho dělají složitým.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 29 zpráv z 29.