Responsivní design keywords
Co byste řekli tomu, kdyby se Váš web zobrazoval na klasických monitorech, tabletech i na chytrých mobilech hezky přehledně a čitelně? Bez "blešího písma" a unavujícího rolování po stránce? Ano, tohle právě umí responsivní neboli responsibilní design.
Aktuální parametry vašeho displeje
| šířka [px] | výška [px] | parametr | |
| CLIENT | document.documentElement.clientWidth, .clientHeight | ||
| OFFSET | document.documentElement.offsetWidth, .offsetHeight | ||
| SCROLL | document.documentElement.scrollWidth, .scrollHeight | ||
| WINDOW | window.innerWidth, .innerHeight | ||
| BODY | document.body.offsetWidth, .offsetHeight | ||
| document.body.scrollWidth, .scrollHeight | |||
| body.width, .height | |||
| SCREEN | screen.width, .height | ||
| screen.availWidth, .availHeight |
Není přitom nutné vytvářet pro různá zařízení speciální design a layout stránek. Podle parametrů displeje aktuálního zařízení se automaticky mění polohy a velikosti ovladačů a prvků na stránce tak, aby vše spolu perfektně ladilo a bylo praktické pro návštěvníky webu bez nutnosti vodorovného rolování. Někdy se u menších displejů potlačí zobrazení méně významných prvků a úseků stránky. Tím se dá ušetřit cenný prostor pro důležité informace.
Šablony s responsivními vlastnostmi se začínají objevovat čím dál častěji. Jsou praktické pro uživatele a působí také esteticky.
Základem je šířka zobrazovací plochy
Rozměry se udávají v jednotkách px = pixel
- 320px: malý mobil na výšku
- 480px: malý mobil na šířku, mobil na výšku
- 600px: malý tablet na výšku (Amazon Kindle 600x800)
- 768px: tablet, iPad 1 a 2 na výšku
- 1024px: notebook, monitor, tablet na šířku
- 1200px: širokoúhlý monitor
Kontejner obalující vše
Praktickým řešením responsivního designu je na mřížkách založený layout stránky. Předpokládá existenci všeobalujícího prvku container, který je hierarchicky nejvýše.
Každý řádek row je vždy tvořen pevně daným počtem sloupců column. Např. framework foundation používá mřížku o 12 sloupcích.
Stylování pomocí Media queries
Díky parametrům Media queries můžeme identifikovat velikost okna, orientaci displeje, barevnou hloubku, apod.) a podle hodnot nastavovat styl zobrazovaných prvků!
- /* media-queries.css */
- @media screen and (max-width: 1200px) {
- /* zde budou styly pro šířku do 1200px */
- }
- @media screen and (max-width: 800px) {
- /* zde budou styly pro šířku do 800px */
- }
Jak prohlížeče Media queries podporují?
Různé prohlížeče nepodporují Media queries automaticky. Všechny nové verze prohlížečů jej podporují, ale jako vždy problematický Internet Explorer až od verze 9. Pro starší verze je třeba použít java-sriptové řešení, např. pomocí skriptů respond.js, media-queries.js.
Jak na to ve 3 krocích
krok 1: nastavit meta tag
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- /* media-queries.css for IE < 9 */
- <!--[if lt IE 9]>
- <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
- <![endif]-->
krok 2: definovat základní rozvržení stránky - page layout
např.: Stránka o šířce 960px bude tvořena hlavičkou (header), obsahovým kontejnerem (content), postranním panelem (sidebar) a patičkou (footer). Hlavička má pevnou výšku 180px, obsahový kontejner je 600px široký a postranní panel je 300px široký.
- #pagewrap {
- padding: 5px;
- width: 960px;
- margin: 20px auto;}
- #header { height: 180px; }
- #content {
- width: 600px;
- float: left; }
- #sidebar {
- width: 300px;
- float: right; }
- #footer { clear: both; }
krok 3: definovat Media queries
- /* for 980px or less */
- @media screen and (max-width: 980px) {
- #pagewrap { width: 94%; }
- #content { width: 65%; }
- #sidebar { width: 30%; }
- }
- /* for 700px or less */
- @media screen and (max-width: 700px) {
- #content {
- width: auto;
- float: none;
- }
- #sidebar {
- width: auto;
- float: none;
- }
- }
- /* for 480px or less */
- @media screen and (max-width: 480px) {
- #header { height: auto; }
- h1 { font-size: 24px; }
- #sidebar { display: none; }
- }
Ukázkový příklad
Hlavička - Header
Zde se nachází obsah HLAVIČKY
Obsah - Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Odkazy
- mediaqueri.es - galerie responsivních šablon
- responsive.is - blog
- responsinator.com - test zobrazení na mobilu
- screenqueri.es - testování vzhledu dané stránky o velikostech různých zařízení
- foundation - download
Zdroje
- [1] Ethan Marcotte, Responsive Web Design (2011)
- [2] Luke Wroblewski, Mobile First (2011)
- [3] Responsive Design in 3 Steps (en)