IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

@media - Český CSS 3 manuál

Pomocí CSS 3 pravidla @media nastavujeme rozdílné styly pro různá zařízení či různé média typy (např. tisk stránky).

Popis

Toto pravidlo se většinou používá pro responzivní webdesign. Můžeme ho ale také použít pro vzhled stránky při tisku či rozvržení stránek pro hlasovou čtečku. Krom tohoto nastavení v CSS můžeme toto pravidlo použít pro výběr stylů v HTML, takže kdybychom např. chtěli udělat design pro zařízení menší než 600px, použili bychom tento kód:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="styly.css">

Při používání definujeme media typ, klíčová slova and, not nebo only a dané pravidlo. Do tělíčka poté píšeme styly, které chceme použít pro danou situaci.

Media typy

  • all - Používá se pro všechny typy zařízení.
  • print - Používá se pro tisk stránky.
  • screen - Používá se pro počítače, tablety, telefony atd.
  • speech - Používá se pro čtení obsahu stránky hlasovou čtečkou.

Tyto 4 typy jsou podporovány a stále se používají. Dříve se používaly ještě následující, ale ty jsou již zastaralé:

  • aural - Používá se pro řečové a zvukové syntezátory.
  • braille - Používá se pro Braillovy hmatové zařízení.
  • embossed - Používá se pro tisknutí Braillovým písmem.
  • handheld - Používá se pro malá nebo kapesní zařízení.
  • projection - Používá se pro prezentace.
  • tty - Používá se pro media typy používající pevnou mřížku znaků.
  • tv - Používá se pro televize.

Media funkce

  • aspect-ratio - Určuje poměr mezi výškou a šířkou zobrazované plochy.
  • color - Určuje počet bitů barevné složky pro výstupní zařízení.
  • color-index - Určuje počet barev, které může zařízení zobrazit.
  • device-aspect-ratio - Určuje poměr mezi výškou a šířkou zařízení.
  • device-height - Určuje výšku zařízení jako je např. u monitoru počítače.
  • device-width - Určuje šířku zařízení jako je např. u monitoru počítače.
  • grid - Určuje zda zařízení zobrazuje webové stránky v mřížce či nikoliv.
  • height - Určuje výšku zobrazované plochy jako je např. výška okna prohlížeče.
  • max-aspect-ratio - Určuje maximální poměr mezi výškou a šířkou zobrazované plochy.
  • max-color - Určuje maximální počet bitů barevné složky pro výstupní zařízení.
  • max-color-index - Určuje maximální počet barev, které může zařízení zobrazit.
  • max-device-aspect-ratio - Určuje maximální poměr mezi výškou a šířkou zařízení.
  • max-device-height - Určuje maximální výšku zařízení jako je např. u monitoru počítače.
  • max-device-width - Určuje maximální šířku zařízení jako je např. u monitoru počítače.
  • max-height - Určuje maximální výšku zobrazované plochy jako je např. výška okna prohlížeče.
  • max-monochrome - Určuje maximální počet bitů barvy v monochromatickém zařízení (odstíny šedi).
  • max-resolution - Určuje maximální rozlišení zařízení pomocí hodnot dpi nebo dpcm.
  • max-width - Určuje maximální šířku zobrazované plochy jako je např. výška okna prohlížeče.
  • min-aspect-ratio - Určuje minimální poměr mezi výškou a šířkou zobrazované plochy.
  • min-color - Určuje minimální počet bitů barevné složky pro výstupní zařízení.
  • min-color-index - Určuje minimální počet barev, které může zařízení zobrazit.
  • min-device-aspect-ratio - Určuje minimální poměr mezi výškou a šířkou zařízení.
  • min-device-height - Určuje minimální výšku zařízení jako je např. u monitoru počítače.
  • min-device-width - Určuje minimální šířku zařízení jako je např. u monitoru počítače.
  • min-height - Určuje minimální výšku zobrazované plochy jako je např. výška okna prohlížeče.
  • min-monochrome - Určuje minimální počet bitů barvy v monochromatickém zařízení (odstíny šedi).
  • min-resolution - Určuje minimální rozlišení zařízení pomocí hodnot dpi nebo dpcm.
  • min-width - Určuje minimální šířku zobrazované plochy jako je např. výška okna prohlížeče.
  • monochrome - Určuje počet bitů barvy v monochromatickém zařízení (odstíny šedi).
  • orientation - Určuje zda je zařízení v zobrazení na výšku nebo na šířku.
  • resolution - Určuje rozlišení zařízení pomocí hodnot dpi nebo dpcm.
  • scan - Určuje progresivní nebo prokládaný skenování televizoru.
  • width - Určuje šířku zobrazované plochy jako je např. výška okna prohlížeče.

Ukázka

Pro ukázku použití pravidla @media se můžeme podívat na vlastnost page-break-inside, kde se používá media typ print a pro vytvoření responzivního webdesingu přes media typ screen na článek Mobile first responzivní design.

My si však také zkusíme něco udělat. Vytvořme si dva popisky (tag label) se zadávacími poli. Popisek a zadávací pole budou na displeji větším než 350px vedle sebe. Na menším displeji se sami seřadí pod sebe. Využijeme k tomu popsané pravidlo @media a jeho typ screen plus funkci max-width. Všimněte si, že nejdříve tvoříme design pro velké displeje a až poté pro ty menší. Mohli bychom to samozřejmě udělat i naopak - použitím funkce min-width.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                label
                {
                        float: left;
                        width: 160px;
                }
                input
                {
                        margin-left: 160px;
                        display: block;
                }
                @media screen and (max-width: 350px)
                {
                        label
                        {
                                display: block;
                        }
                        input
                        {
                                margin-left: 0px;
                        }
                }
                </style>
                <title>@media</title>
        </head>
        <body>
                <label>Jméno</label><input type="text" name="jmeno" id="jmeno" />
                <label>Heslo</label><input type="password" name="heslo" id="heslo" />
        </body>
</html>

Výsledek (1. obrázek ukazuje vzhled na počítači, 2. na telefonu):

Pravidlo @media v CSS 3 na počítači - Ostatní CSS vlastnosti Pravidlo @media v CSS 3 na telefonu - Ostatní CSS vlastnosti

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity