Flexbox a Grid: Moderní Přístupy k Layoutu
Zjistěte, jak flexbox a CSS grid dělají tvorbu responzivních layoutů jednodušší a efektivnější.
Číst článekMedia Queries: Jak Správně Reagovat na Velikost Obrazovky
Naučte se psát CSS, které se přizpůsobí jakékoli velikosti displeje. Pochopte základní principy media queries a vytvářejte weby, které fungují skvěle na mobilu, tabletu i desktopu.
Proč jsou Media Queries Důležité?
Dnes používáme weby na všech možných zařízeních. Mobilní telefon, tablet, notebook, velký monitor — každé zařízení má jinou velikost displeje. Pokud napíšete CSS jen pro jednu velikost, web nebude vypadat dobře všude.
Media queries jsou CSS pravidla, která se aktivují pouze když je splněna určitá podmínka. Nejčastěji se používají pro různé velikosti obrazovky. Když uživatel otevře váš web na mobilu, CSS se změní. Na desktopu se změní zase jinak. Výsledek? Web, který vypadá skvěle všude.
Není to složité — pokud se naučíte základy, budete schopní vytvářet responzivní weby, na kterých se vám bude líbit pracovat.
Základní Syntax Media Query
Syntax je jednoduchá. Začnete s
@media
, pak napíšete podmínku. Nejčastější je kontrola šířky displeje
pomocí
max-width
nebo
min-width
. Uvnitř media query pak napíšete CSS, které se má použít.
Příklad? Tady je jeden: když je obrazovka menší než 768 pixelů, změnit písmo na menší. Když je větší, vrátit normální velikost. Tímto způsobem web vypadá čitelný na všech zařízeních bez zbytečného scrollování.
Mobile-first přístup je nejlepší. Nejdřív napíšete CSS pro mobil (nejmenší obrazovka), pak postupně přidáváte media queries pro větší zařízení. Proč? Protože mobil je dnes nejčastější způsob, jak si lidé weby prohlížejí.
.container {
font-size: 14px;
padding: 1rem;
}
@media (min-width: 768px) {
.container {
font-size: 16px;
padding: 2rem;
}
}
@media (min-width: 1024px) {
.container {
font-size: 18px;
padding: 3rem;
}
}
Standardní Breakpointy
Existují tzv. breakpointy — hranice, kde se layout změní. Nejčastěji se používají tři: 768px pro tablet a 1024px pro desktop. Mezi nimi zůstane mobil. Ale pozor — nejsou to pevná pravidla. Vaš konkrétní web může potřebovat jiné breakpointy.
Mobil:
320px až 767px
Tablet:
768px až 1023px
Desktop:
1024px a výš
Testujte sami. Otevřete si web v DevTools a zmenšujte okno. Uvidíte, kde se web „láme” — kde text přestane být čitelný nebo kde se prvky navršují. Tam je místo pro nový breakpoint.
Praktické Příklady
Tady se to stává zajímavé. Změna velikosti písma je fajn, ale media queries mohou dělat víc. Můžete skrýt prvky, které nemají smysl na mobilu. Flexbox nebo Grid se změní. Sloupce se stanou řádky. Layout se přizpůsobí.
Příklad: máte třísloupec na desktopu. Na tabletu se změní na dva sloupce. Na mobilu se stanou jeden sloupec, jeden pod druhým. To všechno bez JavaScriptu — jen CSS a media queries.
Další věc? Padding a margin. Na mobilu potřebujete menší mezery, aby se všechno vešlo. Na desktopu si můžete dovolit větší spacing, který dělá web vzdušnější. Tímto způsobem se web nejen změní v rozvržení, ale i v pocitu a čitelnosti.
.grid {
display: flex;
gap: 2rem;
}
.column {
flex: 1;
}
@media (max-width: 1023px) {
.column:nth-child(3) {
flex-basis: 100%;
}
}
@media (max-width: 767px) {
.grid {
flex-direction: column;
gap: 1rem;
}
.column {
flex: 1 1 100%;
}
}
Pokročilejší Techniky
Pokud chcete jít dál, jsou tu další věci. Orientace displeje — máte možnost reagovat na to, jestli je telefon v režimu na výšku nebo na šířku. Pixelová poměr — moderní displeje mají různé pixelové hustoty. Můžete servírovat lepší obrázky zařízením s vyšší hustotou.
Kombinování podmínek je silný nástroj. Napíšete
@media (min-width: 768px) and (max-width: 1023px)
a máte media query jen pro tablet. Nebo
@media (orientation: landscape)
pro zařízení v režimu na šířku.
Vzpomeňte si na mobile-first přístup. Není to povinné, ale dělá to CSS jednodušší a web rychlejší. Proč? Protože nepotřebujete tolik CSS pro mobil, takže je menší soubor a načítá se rychleji.
Tipy a Osvědčené Postupy
Začněte od Mobilu
Napřed napíšete CSS pro nejmenší obrazovku. Pak přidáváte media queries pro větší zařízení. Je to jednodušší a web je pak rychlejší.
Testujte Všechny Velikosti
Nejen breakpointy. Zmenšujte okno postupně a hledejte místa, kde se web „láme”. Tam přidejte media query.
Optimalizujte Obrázky
Velké obrázky zpomalují mobil. Použijte
srcset
a servírujte menší obrázky menším zařízením.
Zůstaňte Konzistentní
Používejte stejné breakpointy po celém webu. Nebo alespoň si je poznamenejte. Usnadní to budoucí údržbu.
Nezapomeňte na Dotyk
Na mobilu se používá dotyk. Tlačítka musí být dostatečně velká — alespoň 44 44 pixelů. Jinak je těžké je stisknout.
Otestujte v Reálných Zařízeních
DevTools jsou skvělé, ale nejsou to skutečná zařízení. Pokud můžete, otestujte web na opravdovém telefonu a tabletu.
Závěr: Vytvářejte pro Všechna Zařízení
Media queries jsou základem responzivního webdesignu. Nejsou to magické — je to jen CSS, který se změní podle velikosti obrazovky. Není to složité na učení a efekt je obrovský.
Začněte jednoduše. Vezměte si web, který máte. Otevřete ho v DevTools, zmešujte okno a podívejte se, kde se to láme. Tam napíšete media query. Postupně se to stane zvykem a nebudete o tom ani přemýšlet.
Pamatujte: dnes nejsou mobilní zařízení přidavné. Jsou primární. Web, který vypadá skvěle na mobilu, je dnes nutnost. A media queries vám k tomu pomohou.
Vzdělávací Obsah
Tento článek je určen pro vzdělávací účely. Obsahuje základní principy a postupy pro práci s media queries v CSS. Každý web je jiný a může vyžadovat přizpůsobení těchto příkladů vašim konkrétním potřebám. Testujte svůj web na skutečných zařízeních a s různými rozlišeními obrazovky. Vývojářské nástroje prohlížeče (DevTools) jsou nezbytné pro kontrolu, jak váš web vypadá na různých velikostech displeje.
Související Články
