Nejdřív mobil

Weby si lidé prohlížejí na mobilech, tabletech i počítačích a jejich obrazovky jsou různě široké: mobil má obrazovku širokou asi 375 pixelů, tablet asi 768 a počítač 1280 i víc. Stránce, která přizpůsobí své rozvržení šířce obrazovky, se říká responzivní. V této lekci domovskou stránku útulku předěláte tak, aby byla responzivní.

Celou domovskou stránku jsme sestavili z toho, co už znáte: záhlaví s navigací, úvodní sekci s nadpisem, karty koček, kroky adopce a zápatí. Navrhli jsme ji ale jen pro obrazovku počítače. Na mobilu se karty i kroky mačkají a navigace se nevejde.

Abyste to viděli, potřebujete změnit šířku náhledu. Na počítači zabírá náhled zhruba třetinu okna, takže je na většině notebooků užší než tablet. Šířku změníte lištou Šířka náhledu nad náhledem, kterou už znáte z předchozích lekcí:

• Podle okna ukáže stránku ve vlastní šířce náhledu (číslo v závorce).
• 375 px ji ukáže tak širokou jako obrazovku mobilu, 768 px jako obrazovku tabletu a 1280 px jako obrazovku počítače.

Při 768 nebo 1280 px se stránka rozloží v této šířce a pak se zmenší, aby se do náhledu vešla. Všechno je menší, ale rozvržení je přesně takové, jaké by ukázala taková obrazovka. Vyzkoušejte všechna čtyři tlačítka a prohlédněte si stránku v každé šířce.

V CSS se styly jen pro některé šířky píšou do media query: do pravidla @media, ke kterému se kurz CSS nedostal. Pravidla uvnitř něj platí, jen když platí podmínka v závorce, tady když je stránka široká aspoň 48rem (768 px):

@media (width >= 48rem) {
	h1 {
		font-size: 3.75rem;
	}
}

(Ve starším kódu uvidíte stejnou podmínku zapsanou jako (min-width: 48rem).)

V Tailwindu media queries sami nepíšete. Před třídu napíšete předponu (prefix), stejně jako hover: v minulé lekci. Předpona md: (z anglického medium, střední) použije třídu až od šířky 768 px. I to je varianta, jen nezávisí na stavu, ale na šířce obrazovky. Tohle je, trochu zjednodušeně, CSS, které Tailwind vytvoří pro md:text-6xl:

@media (width >= 48rem) {
	.md\:text-6xl {
		font-size: 3.75rem; /* 60 px */
		line-height: 1;
	}
}

Zpětné lomítko v .md\:text-6xl znáte z minulé lekce: říká CSS, že dvojtečka patří k názvu třídy a nezačíná pseudotřídu.

Třída bez předpony platí v každé šířce. Proto se stránky s Tailwindem dělají mobile first (nejdřív mobil): nejdřív stránku nastylujete pro mobil třídami bez předpon a pak přidáte třídy s předponami pro to, co se má na širších obrazovkách změnit. Například text-4xl md:text-6xl je nadpis velký 36 pixelů, který se vejde na mobil, a od 768 px má 60 pixelů.

Častá chyba: md: neznamená „jen na tabletu“. Znamená „od 768 px výš“, takže platí i na počítači. A pro mobily žádná předpona není: co je pro mobil, je bez předpony.

Ještě jednu věc potřebuje každá responzivní stránka. Prohlížeče v mobilech počítají se stránkami dělanými pro počítač, a tak stránku rozloží, jako by obrazovka byla široká asi 980 px, a pak ji zmenší, aby se vešla. Text je pak drobný a třídy s md: platí i na mobilu. Tento řádek v head prohlížeči řekne, že stránka je připravená na každou šířku: má ji rozložit na skutečnou šířku obrazovky (width=device-width) a nic nepřibližovat ani neoddalovat (initial-scale=1):

<meta name="viewport" content="width=device-width, initial-scale=1">

Viewport je část okna prohlížeče, ve které se stránka zobrazuje. Náhled není mobil, takže v něm žádný rozdíl neuvidíte, ale na skutečném mobilu se stránka bez tohoto řádku neobejde.