Responzivita

Media queries

Pravidla, která platí jen za určitých podmínek: od nějaké šířky obrazovky, v dark mode systému, u myši.

Postavíme stránku tábora, která má na telefonu jeden sloupec, na tabletu dva a na počítači tři. V náhledu přepínejte Mobil, Tablet a Desktop.

Začátek

Nejdřív telefon

Základní CSS píšeme pro nejužší obrazovku: všechno pod sebou, jeden sloupec karet. Na telefonu to vypadá dobře a nic dalšího nepotřebuje.

Přepněte na Desktop: jeden sloupec přes celou šířku monitoru vypadá prázdně. Širší obrazovky dostanou pravidla navíc. Tomu se říká mobile first, viz lekce Mobile first.

Podmínka · 1

Od šířky `min-width`

Od 600 px šířky je místo na dva sloupce karet a na hlavičku v jednom řádku. Pravidla uvnitř @media platí jen tehdy, když je podmínka splněná.

Náhled je teď na šířku tabletu, 768 px. min-width: 600px čtěte jako „od 600 px výš“. V předchozích lekcích jsme psali opačně max-width: „do 600 px“.

Podmínka · 2

Druhý breakpoint

Od 900 px se vejdou tři sloupce. Další @media přidáme pod první. Na velké obrazovce platí obě podmínky, pozdější pravidlo vyhraje.

Breakpointy volte podle obsahu, ne podle konkrétních telefonů: zúžujte okno, a kde se layout rozbije, tam patří breakpoint. Většině stránek stačí dva až tři.

Podmínka · 3

Zápis s porovnáním

Novější a čitelnější zápis používá znaménka. width >= 600px říká přesně totéž co min-width: 600px, jen se to nedá splést.

Umí to všechny současné prohlížeče. Rozsah se zapíše jako (600px <= width < 900px), tedy jen pro tablet.

Podmínka · 4

Dark mode `prefers-color-scheme`

Podmínka se nemusí ptát na šířku. prefers-color-scheme: dark platí, když má uživatel v systému zapnutý dark mode. Stránce pak dáme tmavé pozadí a světlý text.

Náhled se teď chová jako v dark mode systému. Tlačítkem Dark mode v liště náhledu můžete přepínat. Celý postup je v lekci Dark mode.

Shrnutí

Základ pro telefon, přídavky pro větší

Ano

základní CSS pro mobil, @media (width >= …) pro větší obrazovky
dva až tři breakpointy podle obsahu
@media až pod běžnými pravidly
prefers-color-scheme, hover a prefers-reduced-motion pro nastavení uživatele

Ne

breakpoint pro každý model telefonu
zvlášť celá stránka pro mobil a pro desktop

Další lekce: Proměnné →