Tentýž web otevřeš na mobilu, tabletu i na velkém monitoru. Na mobilu má být menu schované a text v jednom sloupci. Na monitoru se vejdou tři sloupce vedle sebe.
Dělat tři různé weby by bylo drahé. Proto se dělá jeden, který se přizpůsobí šířce obrazovky. Tomu se říká responzivní design. Většina lidí dnes na web chodí z mobilu, takže bez toho se neobejdeš.
Voda nemá svůj tvar. Nalij ji do sklenice a má tvar sklenice. Responzivní web taky nemá pevnou šířku. Vyplní okno, které dostane. K tomu slouží tři nástroje.
Mobilní prohlížeče kdysi předstíraly široký displej a stránku zmenšily. Tenhle řádek do <head> jim řekne: „Použij skutečnou šířku zařízení.“
<meta name="viewport" content="width=device-width, initial-scale=1">. Bez něj se na mobilu zobrazí zmenšená „desktopová“ stránka a media queries nebudou fungovat, jak čekáš.% = procento rodiče, rem = násobek velikosti písma kořenového elementu, vw = procento šířky viewportu.| Jednotka | Vůči čemu | Příklad |
|---|---|---|
% | rozměr rodiče | width: 50% |
em | velikost písma (u font-size písma rodiče) | padding: 1em |
rem | velikost písma kořenového elementu html (v prohlížečích obvykle 16 px) | font-size: 1.5rem = 24 px při 16 px |
vw / vh | 1 % šířky / výšky viewportu | width: 100vw |
Obrázek, který nesmí přetéct z úzkého displeje: img { max-width: 100%; height: auto; }.
@media (min-width: 768px) { … }.karty { display: grid; gap: 16px; } platí pro všechny. @media (min-width: 768px) { .karty { grid-template-columns: repeat(3, 1fr); } } přidá sloupce jen na širších displejích.Roztřiď jednotky. Ptej se: mění se velikost, když se změní okno nebo písmo?
Dva weby znamenají dvojí práci a obsah se rozchází. Responzivní design řeší všechny šířky jedním kódem.
%, rem, vw, max-width: 100%) a media queries, které při breakpointech mění rozvržení.Máš navrhnout web pro pekárnu. Zákazníci ho otevírají hlavně na mobilu cestou do práce. Začneš tedy u malé obrazovky a teprve pak přidáváš pro větší. Tomuto postupu se říká mobile first.
<head> řekne mobilu, ať použije skutečnou šířku zařízení.<meta name="viewport" content="width=device-width, initial-scale=1">@media (podmínka) { … }. Pravidla uvnitř platí jen, když je podmínka splněná.@media (min-width: 900px) { … } – jen pro viewport široký aspoň 900 px.min-width.Opak, desktop first, začíná širokým displejem a pro menší ubírá pomocí max-width.<head> dej meta viewport.max-width: 100%, ať nepřetékají.@media (min-width: …) a v něm jen to, co se mění.nav { display: flex; flex-direction: column; } – základ pro mobil. @media (min-width: 600px) { nav { flex-direction: row; } } – na větších displejích vedle sebe.2.5rem a kolik 50vw na displeji širokém 400 px?2.5rem = 2,5 · 16 = 40 px. 50vw = 50 % ze 400 px = 200 px.Při mobile first se pravidla jen přidávají. Mobil stáhne a použije nejjednodušší styly a nic se nepřepisuje tam a zpátky. Zároveň tě to nutí rozmyslet, co je na stránce opravdu důležité.
Doplň mezery a ověř si, že rozumíš principu.
Zařízení jsou stovky a každý rok přibývají nová. Rozvržení navázané na obsah funguje na všech.
@media (min-width: …). Nezapomeň na meta viewport, pružné jednotky a breakpointy podle obsahu.