Mobilní první — psaní CSS od nejmenších obrazovek
Jak se přesunout na mobilní-první přístup v CSS. Začněte s nejjednoduššími styly a přidávejte složitost s media queries, jak se obrazovka zvětšuje.
Co je to mobilní-první přístup?
Mobilní-první přístup znamená, že píšete CSS nejdřív pro nejmenší obrazovky — mobily — a pak postupně přidáváte styly pro větší zařízení. Není to jen o tom, aby váš web vypadal na mobilu — jde o úplně jiný způsob myšlení na design.
Tradiční přístup se často tvořil naopak. Webdesignéři nejdřív navrhli velkou desktop verzi a pak se snažili všechno zmenšit. Výsledek? Zbytečné kódy, pomalé načítání na mobilech a frustrující uživatelé. Mobilní-první to otáčí naruby.
Tři základní principy
Pokud chápete tyhle tři věci, zbytek je snadný
Začněte minimálně
Na mobilu je prostor omezený. Napište jen to nejpotřebnější. Bez paddingu co není potřeba, bez width omezení, bez věcí co by znesnadňovaly čtení. Jeden sloupec. Jednoduché.
Přidávejte postupně
Když obrazovka roste, přidáte složitost. Na 768px přidáte dvousloupec. Na 1024px můžete přidat sidebar. Prostě se rozvíjíte spolu se zařízením. Není to o „odebrání věcí” — je to o „přidávání”.
Méně kódu, více čistoty
Když začnete minimálně, skončíte s menším CSS. Bez zastaralých stylů pro desktop. Bez @media queries co se překrývají. Prostě čistější, lehčí, rychlejší kód.
Praktická implementace
Prakticky to vypadá takhle. Napíšete si základní mobil styly. Pak když se obrazovka zvětší, přidáte @media query. Dál se rozvíjíte. Není to složité — jde jen o pořadí, v jakém věci děláte.
Řekněme, že máte grid. Na mobilu je to jeden sloupec — prostě `display: block` nebo `display: flex` s `flex-direction: column`. Na tabletu to bude dva sloupce. Na desktopu tři. Každou změnu přidáte v media query, když ji potřebujete.
Klíčové je: nemusíte nic mazat. Jen přidáváte. Styly z mobilu se dědit — vy jen přepisujete to, co se mění. To je elegance tohohle přístupu. A to je důvod, proč to funguje.
Breakpointy, které skutečně fungují
Neexistuje „správný” breakpoint. Ale jsou hodnoty, které vám usnadní život. Nejčastěji používáme:
- 320px až 767px: Mobily. Jednoduché, lineární layout.
- 768px až 1023px: Tablety. Prostor pro dvousloupec, více obsahu vedle sebe.
- 1024px a výš: Desktop. Plný potenciál — tři sloupce, sidebary, složité layouty.
Proč tyto čísla? Protože se shodují s tím, jak lidé skutečně používají zařízení. iPad je kolem 768px. Průměrný desktop má alespoň 1024px. Není to věda — je to jen zkušenost z let.
Fluidní jednotky místo pixelů
Jednou z nejlepších věcí, kterou můžete dělat, je přestat psát `px` pro všechno. Pixely jsou statické. Když napíšete `font-size: 16px`, vždycky to bude 16px, bez ohledu na to, jak se změnila obrazovka.
Fluidní jednotky — `rem`, `em`, `%` — se přizpůsobují. `1rem` je vždy relativní k velikosti písma kořene. `1em` je relativní k prvku. Procenta jsou relativní k rodiči. To dává vašemu designu elasticitu.
Nejlepší praktika? Použijte `rem` pro padding, margin a font-size. Zkuste si `clamp()` funkci — ta vám umožní být mezi minimální a maximální hodnotou, přičemž se fluidně přizpůsobuje. Jako `font-size: clamp(1rem, 2vw, 2rem)` — minimálně 1rem, maximálně 2rem, a mezi tím se mění podle šířky viewportu.
Dotyková přátelskost není zbytečnost
Když píšete pro mobil, myslíte na prsty, ne na myš
Větší cílové oblasti
Tlačítko by mělo být minimálně 44×44 pixelů. Prst je širší než kurzor myši. Když je tlačítko malé, lidé ho nenamáčknou. Tak prostě — udělejte věci větší na mobilu.
Bez hover efektů
Na mobilu není hover. Prst se jen dotkne a je to. Takže neodpovídejte na `:hover` — používejte `:active` a `:focus`. Dajte lidem zpětnou vazbu, kterou opravdu vidí.
Prostor mezi prvky
Dva blízko sebe umístěné prvky jsou problém. Člověk stiskne jeden, míří na druhý. Dejte jim prostor. Padding mezi tlačítky. Gap v layoutu. Všechno se stane lépe.
Shrnutí — začněte dnes
Mobilní-první přístup není futurismus. Je to praktika, která dává smysl. Vaš web bude jednodušší, rychlejší a bude na něm lépe pracovat.
Jak začít? Vezměte si projekt, na kterém pracujete. Vymažte všechny desktop specifické styly. Napište jen mobil verzi. Pak postupně přidávejte @media queries pro větší obrazovky. Zjistíte, že to jde snáz, než jste čekali. A váš CSS bude čistší.
„Mobilní-první není trend. Je to evoluce. Začněte psát CSS tak, aby fungovalo na nejmenší obrazovce, a vše ostatní přijde samo.”
Máte otázky? Potřebujete konkrétní radu? Podívejte se na související články níže — jsou tam praktické příklady a kódy, které můžete hned používat.
Související články
Poznámka k obsahu
Tento článek je poskytován pouze pro vzdělávací účely. Informace zde jsou základní pokyny a osvědčené postupy v oblasti responzivního webdesignu. Každý projekt je unikátní a může vyžadovat jiný přístup. Doporučujeme vždy testovat vaše řešení na skutečných zařízeních a s reálnými uživateli. Web se vyvíjí rychle — pokud zjistíte, že se něco změnilo, prozkoumejte nejnovější standardy a best practices. Kontaktujte specialistu, pokud potřebujete konkrétní radu pro váš projekt.