Multimediální dotazy lze použít k určení souborů CSS na základě nahlášených charakteristik zařízení (responzivní návrh). Prohlížeč v zařízení zkontroluje multimediální dotaz a použije k zobrazení webové stránky odpovídající soubor CSS.

Například následující multimediální dotaz určuje pro zařízení s šířkou 300–320 obrazových bodů soubor phone.css.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

Rozsáhlý úvod do multimediálních dotazů naleznete v článku Dona Bootha v centru společnosti Adobe pro vývojáře www.adobe.com/go/learn_dw_medquery_don_cz.

Další informace o multimediálních dotazech v rámci W3C naleznete na adrese www.w3.org/TR/css3-mediaqueries/.

Vytvoření multimediálního dotazu

V aplikaci Dreamweaver lze vytvořit soubor s multimediálním dotazem pro celé webové místo.

Soubor s multimediálním dotazem na celé webové místo

Určuje nastavení zobrazení pro všechny stránky webového místa, které daný soubor obsahují.

Soubor s multimediálním dotazem na celé webové místo slouží jako centrální úložiště pro všechny multimediální dotazy ve webovém místě. Po vytvoření tohoto souboru se k němu připojte ze stránek webového místa, které musí k jejich zobrazení použít multimediální dotazy v souboru.

Multimediální dotaz specifický pro dokument

Multimediální dotaz je vložen přímo do dokumentu a stránka se zobrazí v závislosti na vloženém multimediálním dotazu.

  1. Vytvořte webovou stránku.

  2. Vyberte možnost Změnit > Multimediální dotazy.

  3. Proveďte jeden z následujících úkonů:

    • Pokud chcete vytvořit soubor s multimediálním dotazem na celé webové místo, vyberte možnost Soubor s multimediálním dotazem na celý web.

    • Pokud chcete vytvořit multimediální dotaz specifický pro dokument, vyberte možnost Tento dokument.

  4. Pokud chcete pracovat s multimediálním dotazem na celé webové místo, postupujte následovně:

    1. Klepněte na možnost Určit.

    2. Vyberte možnost Vytvořit nový soubor.

    3. Zadejte název souboru a klepněte na tlačítko OK.

  5. Je možné, že některá zařízení skutečnou šířku nehlásí. Chcete-li vynutit hlášení skutečné šířky zařízení, zkontrolujte, že je aktivní možnost Vynutit oznamování skutečné šířky.

    Pokud tuto možnost vyberete, bude do souboru vložen následující kód.

    <meta name="viewport" content="width=device-width">
  6. Proveďte jeden z následujících úkonů:

    • Kliknutím na znaménko „+“ definujte vlastnosti souboru s multimediálním dotazem.

    • Klikněte na možnost Výchozí přednastavení, chcete-li začít se standardními přednastaveními.

  7. Vyberte řádky v tabulce a upravte jejich vlastnosti pomocí možností v nabídce Vlastnosti.

    Popis

    Popis zařízení, pro které je třeba použít soubor CSS. Například telefon, televizor, tablet a podobně.

    Minimální šířka a maximální šířka

    Soubor CSS se používá pro zařízení, jejichž nahlášená šířka je v rozsahu zadaných hodnot.

    Poznámka:

    Ponechejte pole Min. šířka nebo Max. šířka prázdné, pokud nechcete rozsah hodnot pro zařízení výslovně zadat. Například je běžné ponechat prázdné pole Min. šířka, pokud chcete vybrat telefony se šířkou 320 obrazových bodů nebo méně.

    Soubor CSS

    Vyberte možnost Použít existující soubor a vyhledejte soubor CSS pro zařízení.

    Chcete-li vybrat soubor CSS, který teprve vytvoříte, vyberte možnost Vytvořit nový soubor. Zadejte název souboru CSS. Soubor bude vytvořen po stisknutí tlačítka OK.

  8. Klepněte na tlačítko OK.

  9. Pro potřeby multimediálního dotazu na celé webové místo bude vytvořen nový soubor. Uložte jej.

Multimediální dotaz na celé webové místo: u existujících stránek zkontrolujte, zda jste na všechny stránky do tagu <head> vložili soubor s multimediálním dotazem.

Příklad odkazu s multimediálním dotazem, kde mediaquery_adobedotcom.css je soubor s multimediálním dotazem na celé webové místo pro web www.adobe.com/cz:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Použití existujícího souboru s multimediálním dotazem

  1. Vytvořte webovou stránku nebo otevřete existující stránku.

  2. Vyberte možnost Změnit > Multimediální dotazy.

  3. Vyberte soubor s multimediálním dotazem na celý web.

  4. Klepněte na možnost Určit.

  5. Vyberte možnost Použít existující soubor, pokud jste již vytvořili soubor CSS s multimediálním dotazem.

  6. Klepnutím na ikonu procházení můžete vyhledat a vybrat soubor. Klepněte na tlačítko OK.

  7. Vyberte soubor s multimediálním dotazem na celý web.

  8. Chcete-li vynutit hlášení skutečné šířky zařízení, zkontrolujte, že je aktivní možnost Vynutit oznamování skutečné šířky. Pokud tuto možnost vyberete, bude do souboru vložen následující kód.

    <meta name="viewport" content="width=device-width">
  9. Klepněte na tlačítko OK.

Výběr jiného souboru s multimediálními dotazy na celé webové místo

Tímto postupem lze změnit soubor s multimediálními dotazy na celé webové místo, který jste stanovili v dialogovém okně Multimediální dotazy.

  1. Vyberte možnost Web > Správa webů.

  2. V dialogovém okně Správa webových míst vyberte webové místo.

  3. Klepněte na možnost Upravit. Zobrazí se dialogové okno Nastavení webu.

  4. V části Další nastavení na levém panelu vyberte možnost Lokální informace.

  5. V části Soubor s multimediálním dotazem na celé webové místo na pravém panelu klepnutím na možnost Procházet vyberte soubor CSS s multimediálním dotazem.

    Poznámka:

    Změna souboru s multimediálním dotazem na celé webové místo nemá vliv na dokumenty připojené k jinému nebo předchozímu souboru s multimediálním dotazem na celé webové místo.

  6. Klepněte na tlačítko Uložit.

Zobrazení webových stránek na základě multimediálních dotazů

Rozměry zadané v multimediálním dotazu se zobrazují v možnostech pro tlačítko Více displejů/velikost okna. Pokud vyberete z nabídky rozměr, zobrazí se následující změny:

  • Velikost pohledu se změní tak, aby odrážela vybrané rozměry. Velikost rámce dokumentu zůstane nezměněna.

  • Soubor CSS vybraný v multimediálním dotazu se používá k zobrazení stránky.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online