9. Responzivní web
Dnes se již internet neprohlíží pouze z domu, nebo z práce. Od počítače jsme se přesunuli k tabletům a chytrým telefonům. Od úhlopříček monitorů přesahujících 22 palců, až po 3,5 palcové obrazovky. Jak tedy zajistit, aby se náš web zobrazoval na rozdílných obrazovkách správně?
Již ve fázi návrhu, a později kódování, je potřeba zajistit, aby se webové stránky chovali flexibilně vůči velikosti zobrazovací plochy. Již mnoho let se zkoumá, jaké techniky jsou k tomuto účelu nejvhodnější. Za tu dobu se objevilo mnoho informací. Bohužel vysvětlením všeho, co s responzivním webem souvisí, by bylo na další kurz. Podívejme se tedy na základy kódování responzivních stránek.
Než se pustíte do responzivního CSS
Ujistěte se, že v hlavičce HTML dokumentu (<head>) je tento kód:
<meta name="viewport" content="width=device-width, initial-scale=1">
Vlastnost width určuje šířku stránky. Mohli bychom nastavit pevnou šířku, např 800px, ale jak sami tušíte, v takovém případě by se stránka zobrazovala hezky jen na malém procentu zařízení. device-width zajistí to, že naše stránka bude přizpůsobena šířce displeje.
Vlastnost initial-scale=1 pak prohlížeči řekne, že hned po načtení stránky by měla být zobrazena bez přiblížení (zoom), ve své přirozené podobě.
Kontrolování responzivního layoutu pomocí CSS
V CSS fungují tzv. media queries, značící se pomocí @media{ }. Nejlépe viditelné to bude opět na příkladu:
/*
Styly pro stránku do šířky 768px
*/
@media screen and (max-width: 768px) {
.class { ... }
}
/*
Styly pro stránku od šířky 60em
*/
@media screen and (min-width: 60em) {
.class1 { ... }
}
/*
Styly pro stránku, zobrazenou na mobilním zařízení na šířku
*/
@media screen and (orientation: landscape) {
.class2 { ... }
}
/*
Styly pro tisk stránky
*/
@media print {
.class3 { ... }
}
Do deklarací @media { } se vepisují celé deklarace stylů, tj. ne jen vlastnosti, ale také selektory.
.example {
color: deeppink;
}
@media screen and (min-width: 996px) {
.example {
color: black;
}
}
U web designu je v současné době velmi populární kódování zvané mobile-first. Znamená to, že začínáme kódovat stránky tak, jak chceme, aby vypadali na mobilním zařízení. A poté přidáváme další vlastnosti, které se budou zobrazovat na větších monitorech. V praxi to může vypadat takto:
.mobile-first-component {
width: 100%;
}
@media screen and (min-width: 992px) {
.mobile-first-component {
width: 50%;
}
}
@media screen and (min-width: 1200px) {
.mobile-first-component {
width: 33%;
}
}
Důležité je také upozornit, že responzivní web není pouze o kódování stránek. Velkou roli hraje také samotný HTML kód, resp. obsah, který chceme na mobilním telefonu uživatelům zobrazovat. Pokud si otevřete např. iDnes.cz, uvidíte hned v pravo od hlavního článku počasí. Tato část však na mobilním zařízení vidět není. Logika je zde jednoduchá. Jsou to zbytečné informace, které si můžete najít na jiné stránce, a pravděpodobně máte v telefonu jinou aplikaci na počasí.