Klikněte na panel Visual Media Query, který odpovídá mediálnímu dotazu, který chcete upravit.
Naposledy aktualizováno
20. 12. 2021
Pomocí vizuálních multimediálních dotazů můžete zobrazit a upravit webové stránky podle potřeb jednotlivých velikostí displejů.
Multimediální dotazy je modul standardu CSS3, který umožňuje vytvářet responzivní webové stránky definováním různých pravidel stylu pro různá zařízení nebo typy médií. Na základě těchto pravidel se obsah vykresluje tak, aby se přizpůsobil různým podmínkám, jako jsou velikosti obrazovek, velikosti oken prohlížeče, velikosti a orientace zařízení a rozlišení.
Multimediální dotazy můžete přidat do kódu CSS pomocí pravidla @media. Případně můžete vytvořit samostatné šablony stylů pro různé typy médií a poté je volat pomocí následující syntaxe:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Prohlížeč v zařízení zkontroluje multimediální dotaz a použije k zobrazení webové stránky odpovídající soubor CSS.
Další informace najdete v tomto článku.
Multimediální dotazy lze přidávat doplněním příslušného kódu do souborů HTML nebo CSS. Kromě toho vám Dreamweaver umožňuje jednoduše vytvářet a spravovat mediální dotazy pomocí:
Základní rozdíl mezi těmito dvěma metodami je vizuální aspekt. Pokud raději píšete kód a poté zobrazujete změny v Živém zobrazení, použijte nástroj CSS Designer. Pokud raději svou stránku vizualizujete na různých bodech přerušení a zároveň měníte návrh, zkuste spíše použít panel s dotazy na vizuální multimédia.Řádky s dotazy na vizuální multimédia
Řádky s dotazy na vizuální multimédia jsou vizuální reprezentací multimediálních dotazů na stránce. Tyto řádky vám pomáhají vizualizovat webovou stránku na různých místech a ukazují, jak jsou různé součásti webové stránky přeformátovány na různých velikostech displejů. Zatímco zobrazujete svou stránku na různých velikostech displeje, můžete změnit design pro konkrétní velikost displeje bez vlivu na design stránky při jiných velikostech.
Dotaz na vizuální multimédia obsahuje tři vodorovné řádky, z nichž každý představuje kategorii multimediálního dotazu:
Zelená: Mediální dotazy s podmínkami max-width
Modrá: Mediální dotazy s podmínkami min-width i max-width
Fialová: Mediální dotazy s podmínkami min-width
Mediální dotazy uvedené na panelu CSS Designer jsou také označeny těmito barvami.
Každá kategorie se může skládat z jednoho nebo více multimediálních dotazů. Pokud podmínky multimediálního dotazu nejsou v dokumentu definovány, nezobrazí se ani odpovídající řádek pro vizuální multimediální dotaz. Například pokud dokument neobsahuje podmínky min-width, pak se fialový pruh nezobrazuje.
Hodnoty breakpointů jsou označeny na pruzích - min-width vlevo a max-width vpravo od pruhu.
A. Body přerušení B. Řádky s dotazy na vizuální multimédia C. Přidat ikonu multimediálního dotazu D. Scrubber
Skrytí nebo zobrazení Visual Media Queries
Panel s dotazy na vizuální multimédia je v Živém zobrazení zobrazen ve výchozím nastavení. Pro skrytí pruhu použijte možnost Přepnout pruh Visual Media Queries na panelu nástrojů.
Přepínání mezi body zabření
Chcete-li svou stránku zobrazit v konkrétní velikosti (bodu přerušení), klikněte na odpovídající panel multimediálního dotazu. Dokument se přichytí k bodu přerušení.
Případně můžete přetáhnout jezdec na požadovaný breakpoint.
Pro změnu velikosti zobrazení na velikost okna dokumentu Dreamweaver proveďte jednu z následujících akcí:
- Dvakrát klikněte kamkoli v šedé oblasti na pravé straně dokumentu, kde se nachází text „Poklepáním přizpůsobte šířce“. Pokud nevidíte šedou oblast, přetáhněte jezdec doleva.
- Vyberte možnost Plná šířka v rozevíracím seznamu ve spodní části okna dokumentu.
Pokud tuto možnost nevidíte, přetáhněte jezdec pro zmenšení velikosti webové stránky.
Upravovat mediální dotazy vizuálně
Objeví se ovladače pro změnu velikosti. U mediálních dotazů, které mají hodnoty min i max-width, se na obou stranách panelu zobrazí úchyty pro změnu velikosti.
Přetáhněte úchyty na požadovanou velikost.
Multimediální dotazy jsou automaticky aktualizovány na nové hodnoty min-width a/nebo max-width. Zobrazí se oznámení o úspěšné úpravě multimediálního dotazu. Pokud s panelem s dotazy na vizuální multimédia souvisí více multimediálních dotazů, jsou aktualizovány všechny multimediální dotazy. Počet mediálních dotazů, které byly aktualizovány, se zobrazí společně se zprávou o úspěchu.
Chcete-li akci vrátit zpět, stiskněte klávesy Ctrl+Z (Win) nebo Cmd+Z (Mac).
Alternativně můžete dvojitě kliknout na hodnoty zarážek a zadat hodnoty pomocí klávesnice.
Přidat nové mediální dotazy
Přetáhnout posuvník podél pravítka na požadovanou velikost.
Klikněte na volbu 
.
V zobrazeném místním okně bude ve výchozím nastavení zvolena možnost max-width. Chcete-li určit min-width nebo min-max, vyberte v rozevíracím seznamu příslušnou možnost a vyberte požadované jednotky.
Poté vyberte zdroj CSS, do kterého chcete mediální dotaz přidat.
Pokud zvolíte vytvoření nového souboru CSS, zobrazí se nový rozbalovací prvek. Zadejte název a cestu k novému souboru CSS a klikněte na OK.
Chcete-li akci vrátit zpět, stiskněte klávesy Ctrl+Z (Win) nebo Cmd+Z (Mac).
Odstranit mediální dotazy
Klikněte pravým tlačítkem myši na odpovídající panel Visual Media Query.
Klikněte na DELETE a poté klikněte na mediální dotaz, který chcete odstranit.
Kliknutím na OK potvrďte, že chcete odstranit všechny mediální dotazy a přidružené selektory.
Chcete-li akci vrátit zpět, stiskněte klávesy Ctrl+Z (Win) nebo Cmd+Z (Mac).
Zobrazit kód pro mediální dotazy
Klikněte pravým tlačítkem myši na požadovaný panel Visual Media Query a najeďte myší na Přejít na kód.
Zobrazí se seznam všech mediálních dotazů v daném rozsahu zarážek spolu se soubory, ve kterých jsou deklarovány.
Kliknutím na požadovaný mediální dotaz přejdete na odpovídající kód v zobrazení Code View.
Pokud není zobrazení Code View viditelné, dokument se přepne do zobrazení Split pro zobrazení kódu.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
