Změna velikosti písma

Drobečková navigace

CSS blog > Media queries

Media queries



Co se skrývá pod touto nadávkou? Je to nastavení vlastností prvků podle velikosti prohlížeče (v praxi, při maximalizovaném okně prohlížeče i velikosti displaye). Lze tím ovlivnit rozmístění, barvu, pozadí, zobrazení , ... prvků v grafice.

Kdy je vhodné je použít?

Media queries se používají především kvůli mobilním zařízením (mobily, tablety, 10° EEPC). Používají se tehdy, pakliže se do grafiky načítají obrázky např. na pozadí s velkým rozlišením a kapacitou; flash animace; jQuery animace; změně rozvrstvení prvků v grafice (změna bočního menu na horní) aj.

Vzhledem k současné rychlosti mobilních připojení takové obrázky výrazně zpomalují načítání stránek. Dá se hlavně předpokládat, že při využívání mobilního zařízení jde návštěvníkovi především o informace a tak není potřeba zobrazovat 0,5MB HD rozlišení na pozadí displeje, ale návštěvník se spokojí s nižší kvalitou pozadí nebo pozadí nemusí vidět vůbec.

Názornou ukázku media queries můžete vidět zde na webu, pokud si maximalizované okno začnete zmenšovat na šířku nebo pokud si stránky otevřete v mobilním zaříení. Pozadí se změní a odsazení celého obsahu se také změní.

Jak na to?

Vzhledem k současným IPO šablonám Vám bude pro Vaše účely stačit v případě velkého obrázku na pozadí pouze pozadí zmenšit na 1024px na šířku, zkopírovat si své aktuální nastavení pozadí (pokud je v CSS) a do uživatelských CSS přidat tento obsah. Druhou (asi i lepší) volbou je veškeré nastavení pozadí vynulovat a nastavit znovu jako v mém případě:

 @media only screen and (max-width: 1024px) {
    html body {
        background: none;
        background: url('image.php?nid=11524&oid=3200748') no-repeat scroll left top #234279;
    }
}

Pozn.: Pokud máte u zakázky nastavené pozadí přes celou šířku stránky, je vhodné jako v tomto případě, celé pozadí vynulovat a pozadí přes celou šíři se za cenu ušetřených kb vzdát. Pokud stránky obsahují flash animaci, můžete ji rovnou přes media queries skrýt, jelikož je mobilní zařízení nepodporují. Pokud máte ve stránkách vloženou jQuery animaci, bylo také dobré zvážit, aby se na mobilním zařízení animace zobrazovala.


Komentáře


Žádné komentáře doposud nebyly přidány.

Přidat komentář

Vámi zadané osobní údaje budeme zpracovávat my a to pro možnost vám odpovědět. Bližší informace naleznete v zásadách zpracování osobních údajů.

Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2