Turoriál: Ako vytvoriť viacstĺpcový layout - časť 2. (responzívny layout pomocou Media Queries)

Turoriál: Ako vytvoriť viacstĺpcový layout - časť 2. (responzívny layout pomocou Media Queries)

Ak povieme, že layout je responzívny, to znamená, že sme vytvorili šablónu štýlov, ktoré prispôsobia webovú stránku v závislosti na typu použitého média (notebook, tablet, smartfón). Media Queries umožňuje v CSS zmeniť prezentovanie stránky na základe veľkosti obrazovky, ktorú návštevník webu používa. V minulosti sa používal JavaScript na detekovanie veľkosti obrazovky. V súčasnosti sa detekovanie realizuje pomocou šablóny štýlov CSS3. Zisťujeme tieto parametre:
- rozlíšenie
- orientácia (na šírku alebo výšku)
- šírka a výška zariadenia
- šírka a výška okna prehliadača

Layout, ktorý sme vytvorili v prvej časti tohto článku má dva stĺpce. Aby bol layout responzívny, je potrebné doplniť do šablóny štýlov tieto pravidlá:

@media only screen and (max-width: 800px) {
body {
	  width: 100%;
	  margin: auto;	  
}
#novinky, #zahlavie, #zapatie{
	        width: 100%;
	       -moz-column-count: 1; 
		   -webkit-column-count: 1;
}
.prispevok { 
       width: 100%;
       padding: 0;
	   margin: 0;
       float: none;
       border: none;
	   font-style: italic;
}   
}

Pravidlá štýlov sme umiestnili do zložených zátvoriek s dotazom na médium, ktoré sa píše za zavináč @. Ak je šírka média detekovaná ako 800px a menej, na webovú stránku sa aplikujú práve tie pravidlá štýlov, ktoré sme napísali medzi zložení zátvorky. Z nášho dvojstĺpcového layoutu sa vytvorí jeden stĺpec.
Do hlavičky webovej stránky <head></head> je potrebné napísať príkaz na detekovanie šírky média:

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>


Výsledok:


Rubriky: