Shrnutí

V této lekci jste domovskou stránku útulku předělali tak, aby byla responzivní, a naučili jste se, že:

• Responzivní stránka přizpůsobí své rozvržení šířce obrazovky. Na liště nad náhledem si můžete stránku prohlédnout tak širokou jako obrazovku mobilu (375 px), tabletu (768 px) nebo počítače (1280 px).
• Každá responzivní stránka potřebuje v head řádek <meta name="viewport" content="width=device-width, initial-scale=1">. Bez něj mobily stránku rozloží, jako by jejich obrazovka byla široká asi 980 px.
• V CSS se styly jen pro některé šířky píšou do media query: @media (width >= 48rem) { ... }. V Tailwindu místo toho napíšete před třídu předponu: md:text-6xl.
• Třída bez předpony platí v každé šířce, třída s předponou od svého breakpointu výš: sm: od 640 px, md: od 768 px, lg: od 1024 px, xl: od 1280 px a 2xl: od 1536 px.
• Mobile first: stránku nastylujete pro mobil třídami bez předpon a pak přidáte třídy s předponami pro to, co se na širších obrazovkách mění.
• Jeden prvek může mít třídy pro několik breakpointů, například grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. Když jich platí víc, vyhraje ta pro nejširší obrazovku.
• flex-col md:flex-row dá prvky na mobilu pod sebe a od 768 px vedle sebe.
• hidden md:flex ukáže prvek až od 768 px, md:hidden jen pod 768 px.
• I mezery a velikost textu se mohou měnit podle šířky: py-12 md:py-24, text-4xl md:text-6xl.
• mx-auto max-w-5xl u prvku s obsahem zabrání tomu, aby se obsah roztáhl přes celou širokou obrazovku, a pozadí sekce přitom dál vyplňuje celou šířku.

V příští lekci, Tmavý režim, dáte webu útulku tmavé barvy pro všechny, kdo je mají raději, a tlačítko, které přepíná mezi světlým a tmavým vzhledem.

Na procvičení tu máte nový kousek webu: větší zápatí s názvem útulku, adresou a tlačítkem Přispět. Stejně jako domovská stránka na začátku této lekce je rozvržené jen pro počítač: na mobilu se jeho tři sloupce mačkají vedle sebe.