Responsivní design

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

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

Zdroje

eWord.cz | © 2010-2018 | mapa stránek