Multimediaexpo.cz je již 18 let na českém internetu !!
Media Queries
Z Multimediaexpo.cz
Media Queries je CSS3 modul umožňující adaptabilní vykreslování webových stránek podle různých činitelů jako rozlišení obrazovky, či velikost obrazovky (např. obrazovka smartphone vs. monitor u PC). Poprvé byly použity již v roce 2001 W3C a staly se doporučeným standardem v červnu 2012. Je to základní stavební kámen pro responzivní web design. Díky tomu lze jen jednoduše upravit styly a výrazně tak zlepšit uživatelům UX při prohlížení.
Media Queries se považují za poslední úroveň responzivní web designu. Jsou to pravidla, díky kterým lze měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení. Následující stylování (červené pozadí celého dokumentu) bude uplatněno pouze tehdy, pokud šířka prohlížeče na použitém zařízení bude v rozsahu od 660px do 780px.
@media (max-width: 780px) and (min-width: 660px){ body{ background-color: red; } }
Obsah |
Mobilní zařízení
Hlavní důvod, proč Media Queries používat, je stoupající počet mobilních zařízení na trhu. Mobilní zařízení mají již standardně v systému internetový prohlížeč a wi-fi, ať už se jedná o smartphony, tablety, či e-čtečky knih. Uživatelova zkušenost s webem je na mobilních zařízeních velice odlišná a musí se dbát na použitelnost.
V číslech
- Na světě je v oběhu přes 6 miliard telefonů
- Apple od představení iPadu prodal přes 84 milionů kusů
- Přes čtvrtinu všech přístupů na internet je skrze mobilní zařízení
- Přes třetinu všech uživatelů facebooku přistupuje ke svému účtu právě z mobilních zařízení
Podpora
- Internet Explorer 9+
- Opera 9.5+
- Opera Mini 5+
- Opera Mobile 10+
- Mozilla Firefox 3.5+
- Firefox Android 15+
- Safari 3+
- iOS Safari 3.2+
- Chrome 4+
- Chrome Android 18+
Základní principy
Dvě cesty vedou k dosažení stejného cíle. První je násilná a mnohdy zvaná "šroubovací" a druhá je zcela nový pohled na tvorbu webu. Obecně vychází Media Queries již z CSS2, kde byly uvedeny media types - konkrétně funkce print. CSS3 tuto funkci rozšiřuje a posouvá o něco dál. Sledují základní vlastnosti zařízení, z kterého uživatel ke stránkám přistupuje:
- šířka a výška prohlížeče
- šířka a výška zařízení
- orientace zařízení(na výšku nebo na šířku)
- rozlišení
Pro uživatele mobilních zařízení je zcela přirozené tzv. "scrollování" nahoru a dolu, spíše než doleva/doprava. Je tedy běžným zvykem "linearizovat" layout do jednoho sloupce. Právě díky vlastnostem CSS jsme schopni definovat a přepsat veškerá pravidla definované pro větší webové browsery.
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }
Pro prolinkování separátního stylesheetu pak stačí
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Graceful Degradation
Nebo-li "ladná degradace". Slouží těm, kteří mají již hotový web a chtějí ho pouze vylepšit o kompatibilitu s mobilním zařízením - tedy při návrhu postupovali od největšího k nejmenšímu. Začíná se od komplexního řešení a pro účely menšího zařízení se funkcionalita oseká.
Kdy používat
- Při absenci času na návrh nové verze
- Stránka má vysoký traffic a její změna by byla příliš nákladná
- Stránka je natolik závislá na skriptech, že její vylepšení není lepším krokem (např. E-mailový klient)
Progressive Enhancement
Nebo-li "progresivní vylepšování". Slouží těm, kteří web začínají navrhovat. Jedná se o základní princip navrhování moderní responzivní webové prezentace - tedy při návrhu se postupuje od nejmenšího k největšímu. Začíná se s prostým designem, který lze zobrazit na všech zařízeních stejně a postupně se zvětšující se obrazovkou nabalují funkce.
Kdy používat
- Při navrhování zcela nové webové prezentace
- Při rozšíření prohlížeče o novou verzi(není třeba měnit originální verzi, stačí stávající vylepšit)
- Pro dosažení cíle, ne pro "nutnost" dosažení cíle
Reference
- W3C - Media Queries recommendation 19 June 2012
- W3C - CSS specs > Media Queries
- Examples of Media Queries usage
- Sitepoint - Media Queries
- Zdroják
- Statistika prohlížečů
Náklady na energie a provoz naší encyklopedie prudce vzrostly. Potřebujeme vaši podporu... Kolik ?? To je na Vás. Náš FIO účet — 2500575897 / 2010 |
---|
Informace o článku.
Článek je převzat z Wikipedie, otevřené encyklopedie, do které přispívají dobrovolníci z celého světa. |