Skip to Content

Responzivní design – dotazy na médium

Existují dva způsoby, jak vytvářet webové prezentace pro rozličná zařízení. Musíme počítat nejen s odlišnou velikostí obrazovky, ale také třeba s úpravou kontextu.

První způsob spočívá ve vytvoření tzv. flexibilní mřížky – to znamená zadávat rozměry v relativních jednotkách např. procentech. (width, margin, padding). Taková webová stránka se může přizpůsobovat různým velikostem zařízení.

Druhý způsob je právě v aplikování kaskádových stylů na určité typy médií (dotazy na média – součást jazyka CSS3). Můžeme tvořit stránky speciálně pro mobilní telefony, nebo postavíme jedny stránky na stejném kódu HTML, ale nastylujeme pro různé zařízení. Také můžeme např. zvětšovat, zmenšovat a měnit obrázky. (Načtěte si stránku http://alistapart.com/article/responsive-web-design a vyzkoušejte zmenšovat velikost prohlížeče:) - toto je mimochodem dobrý způsob testování vašich stránek.)

A jak tedy přidat svůj dotaz do webu?
Buď můžeme přidělit klasicky atribut media do záhlaví stránek jako odkaz na css soubor:

< link rel="stylesheet" media="only screen and (min-width: 480px)" href="styly_min_480.css" />

Anebo rovnou vložíme direktivu @media do pravidel stylů:

@media only screen and (min-width: 480px) {
p {
color: blue;
font-weight: bold;
}
}

Použijí se tedy pravidla za předpokladu, že médium je typu screen a zobrazovací plocha je minimálně široká 480 pixelů.
Logikou dotazu je "only" (v překladu "jen").
Typ média je "screen" ("obrazovka").
Dvojicí vlastnost: hodnota je "min-width: 480px".

Základní syntaxe dotazů na médium v šabloně stylů:

@media logika typ and (vlastnost: hodnota) {
/* pravidla stylů
}

A odkaz na externí šablonu stylů:

<link rel="stylesheet" media="logika typ and (vlastnost: hodnota)" href="styly_min_480.css" />

Dotaz může vypadat i takto:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* pravidla stylů
}

Vlastnosti, které můžeme ještě zahrnout do svých dotazů jsou např. width, height, device-width, device-height, orientation, color atd…

Způsob tvorby webových stránek v responzivním designu se může ubírat dvěma směry. Můžeme napsat základní css styly pro všechna zařízení a potom doplňujeme dotazy na médium, kam vkládáme zápis stylů pro postupně se zvětšující velikosti obazovky.
Anebo navrhneme kompletně stránky pro desktopové počítače a potom přebijeme jejich styly opět dotazy na média pro menší obrazovky.

Takto můžeme například vytvořit více breakpointů rozlišení ve stylech:

320px a více (telefon iPhone a některé mobilní telefony s operačním systémem Android ve svislé poloze):
@media only screen and (min-width: 320px) {
.obrazek {
float: left;
}
}

480px a více (větší modely HTC a spousta telefonů položených vodorovně):
@media only screen and (min-width: 480px) {
.lista {
margin: -10px 0 0 80px;
}
}

600px a více:
@media only screen and (min-width: 600px) {
}

600px až 767px (iPod ve vodorovné poloze):
@media only screen and (min-width: 600px) and (max-width: 767px) {
}

768px a více (tablety, desktopové počítače):
@media only screen and (min-width: 768px) {
}

992px a více
@media only screen and (min-width: 992px) {
}

Na jednu věc ale nesmíme zapomenout. Je zde potřeba rozlišit „zobrazovací plochu“ a skutečnou šířku obrazovky. Device – width (skutečná šířka obrazovky) např. u telefonu iPhone 4 je 320 x 480, ale rozlišení prohlížeče je u tohoto telefonu 640 x 960. Zde se s můžete podívat, jak na tom jsou i jiné telefony:
www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

To znamená, že mobilní zařízení zmenšují webové stránky vyhraněné pro běžné prohlížeče. Dá se říci, že mají proti osobním počítačům rozdílnou velikost průhledu displeje. Jak dosáhnout toho, aby zobrazovací plocha a skutečná šířka obrazovky byly totožné? Aby například odstavec o rozměrech 320 x 480 px se v tomto mobilním telefonu netlačil někde v pozadí ale zabíral celou šířku obrazovky tedy 320px?
Řešení se nachází v meta elementu zobrazovací plochy - viewport, který musí být uveden:


<!doctype html>
<html>
<head>
<meta charset="utf-8" />

<title>HTML 5 - Dotazy na médium </title>

<meta name="keywords" content=" media queries " />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" media="all" href="zakladni.css" />
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="styly-480.css" />
</head>
<body>

Prohlížeč přizpůsobí šířku zobrazovací plochy šířce obrazovky: content="width=device-width.

A nakonec musíme vyřešit ještě takový malý nedostatek: Naše dotazy na média nepodporuje prohlížeč IE 8 a jeho starší verze. Naštěstí existuje jednoduchý javascriptový doplněk respond.js, který si můžeme stáhnout na adrese: https://github.com/scottjehl/Respond a vložíme ho do stránky:

<!--[if lt IE 8]>
<script src="js/respond.js"></script>
<![endif]-->

A ještě pár užitečných tipů:

Knihovna Modernizr jazyka Javascript nabízí mnoho alternativních řešení v případech, kde starší prohlížeče nespolupracují s moderní technologií HTML5 a CSS3. http://modernizr.com/
Také je dobré používat některé simulátory pro kontrolu našich stránek. Nejlépe si můžete vybrat, když do vyhledávače zadáte mobile – emulators – simulators.
Více najdete na: www.w3.org/TR/css3-mediaqueries/#media1