Layout
Mobile first
Stránku navrhneme nejdřív pro telefon. Pro větší obrazovky pak už jen přidáváme. Říká se tomu mobile first.
Ve všech předchozích lekcích jsme postupovali opačně, od desktopu k telefonu. Teď to otočíme.
Start na telefonu
HTML je skoro hotový mobilní layout
Náhled je od začátku na šířce telefonu. Bloky jsou pod sebou, každý přes celou šířku, a přesně tak má stránka na telefonu vypadat.
Proto začínáme tady. Nejmenší obrazovka potřebuje nejméně CSS.
Základ
Styly bez media query jsou pro telefon
Všechno, co napíšeme mimo @media, platí na každé obrazovce. Píšeme to proto pro tu nejmenší: jeden sloupec, malý padding a menu pod logem.
Grid zatím nemá žádné sloupce, jen mezery mezi řádky. Sloupce přidáme později pro desktop.
Zkouška
A jak to vypadá na desktopu?
Náhled se přepnul na desktop a zatím nemáme jediné @media. Nic není rozbité, jen je to celé úzké a dlouhé. Menu je pod logem a text přes celou šířku.
To je hlavní výhoda: v nejhorším případě je stránka moc jednoduchá. U opačného postupu je v nejhorším případě rozbitá.
Přidáváme · tablet
Od 600 pixelů výš
min-width znamená „od této šířky výš“. Na tabletu dáme menu vedle loga, přidáme padding a zvětšíme nadpis.
Na telefonu se nezměnilo nic. Pravidla pro tablet platí jen od 600 pixelů výš.
Přidáváme · desktop
Od 900 pixelů výš
Na desktopu je místo na dva sloupce. Grid, který jsme připravili pro telefon, dostane sloupce, omezenou šířku a vycentrování.
Media queries jdou od nejmenší obrazovky po největší. Na desktopu platí obě a pozdější přidá to, co je navíc.
Srovnání
Ubírat, nebo přidávat?
Oba postupy vedou ke stejnému výsledku. Liší se směrem.
Proč mobile first
- méně přepisování, CSS jen přibývá
- v nejhorším případě je stránka jednoduchá, ne rozbitá
- nutí rozmyslet si, co je na stránce opravdu důležité
Recept
Mobile first v kostce
- styly bez
@mediapíšu pro telefon - pro větší obrazovky přidávám přes
min-width - media queries od nejmenší obrazovky po největší