Klicke auf die Visual Media Query-Leiste, die der Media Query entspricht, die du bearbeiten möchtest.
Zuletzt aktualisiert am
20. Dezember 2021
Verwenden Sie „Visuelle Medienabfragen“, um Ihre Webseiten an verschiedenen Haltepunkten anzuzeigen und zu bearbeiten, die unterschiedlichen Bildschirmgrößen entsprechen.
Bei Medienabfragen handelt es sich um ein CSS3-Modul, mit dem Sie responsive Websites entwerfen können, indem Sie unterschiedliche Stilregeln für verschiedene Geräte oder Medientypen definieren. Basierend auf diesen Regeln wird Inhalt gerendert, um sich an verschiedene Bedingungen anzupassen, wie zum Beispiel Bildschirmgrößen, Browser-Fenster-Größen, Gerätegrößen und -ausrichtung sowie Auflösung.
Sie können Medienabfragen mit der Regel @media zu CSS-Dateien hinzufügen. Oder du kannst separate Stylesheets für verschiedene Medientypen erstellen und sie dann mit der folgenden Syntax aufrufen:
<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' />
Der Browser auf einem Gerät prüft die Medienabfrage und zeigt die Webseite unter Verwendung der entsprechenden CSS-Datei an.
Weitere Informationen finden Sie in diesem Artikel.
Sie können Medienabfragen hinzufügen, indem Sie Ihren HTML- oder CSS-Dateien den entsprechenden Code hinzufügen. Zusätzlich ermöglicht Dreamweaver, Medienabfragen einfach zu erstellen und zu verwalten mit:
Diese beiden Methoden unterscheiden sich in erster Linie in der Darstellung. Wenn Sie in der Live-Ansicht Code verfassen und die Änderungen anzeigen möchten, verwenden Sie CSS Designer. Wenn Sie es vorziehen, Ihre Seite an verschiedenen Haltepunkten darzustellen und gleichzeitig Änderungen am Design vorzunehmen, ist eine visuelle Medienabfrage die bessere Wahl.Leisten für visuelle Medienabfragen
Die Leisten für visuelle Medienabfragen sind eine visuelle Darstellung der auf einer Seite vorhandenen Medienabfragen. Mit diesen Leisten können Sie Ihre Webseite an verschiedenen Haltepunkten und das Layout unterschiedlicher Komponenten der Webseite in verschiedenen Viewports darstellen. Während Sie die Seite in verschiedenen Viewports anzeigen, können Sie Änderungen am Design vornehmen, die für einen Viewport spezifisch sind, ohne das Seitendesign in anderen Viewports zu beeinflussen.
Visuelle Medienabfragen bestehen aus drei horizontalen Leisten, die jeweils eine Kategorie von Medienabfragen darstellen:
Grün: Media Queries mit max-width-Bedingungen
Blau : Media Queries mit sowohl min-width- als auch max-width-Bedingungen
Lila : Media Queries mit min-width-Bedingungen
Die im CSS-Designer-Panel aufgelisteten Medienabfragen sind ebenfalls mit diesen Farben versehen.
Jede Kategorie kann aus einer oder mehreren Medienabfragen bestehen. Wenn keine Medienabfragebedingung im Dokument definiert ist, wird die entsprechende Leiste für visuelle Medienabfragen auch nicht angezeigt. Wenn das Dokument beispielsweise keine Mindestbreite-Bedingungen enthält, wird der violette Balken nicht angezeigt.
Die Breakpoint-Werte werden auf den Balken angezeigt – min-width links und max-width rechts vom Balken.
A. Haltepunkte B. Leisten für visuelle Medienabfragen C. Symbol zum Hinzufügen von Medienabfragen D. Scrubber
Visual Media Queries ausblenden oder anzeigen
Die Leiste für visuelle Medienabfragen wird in der Live-Ansicht standardmäßig angezeigt. Um die Leiste auszublenden, verwende die Schaltfläche „Visual Media Queries-Leiste umschalten" in der Symbolleiste.
Zwischen Breakpoints wechseln
Wenn Sie die Seite in einer bestimmten Größe anzeigen möchten (Haltepunkt), klicken Sie auf die entsprechende Medienabfrageleiste. Das Dokument wird am Breakpoint einrasten.
Alternativ kannst du den Schieberegler zum gewünschten Breakpoint ziehen.
Um die Ansicht auf die Größe des Dreamweaver-Dokumentfensters anzupassen, führe eine der folgenden Aktionen aus:
- Doppelklicken Sie rechts im Dokument auf eine beliebige Stelle im grauen Bereich, in dem der Text „Doppelklicken, um an die Breite anzupassen“ angezeigt wird. Wenn du den grauen Bereich nicht siehst, ziehe den Schieberegler nach links.
- Wähle die Option Vollbreite in der Dropdown-Liste am unteren Rand des Dokumentfensters aus.
Wenn du diese Option nicht siehst, ziehe den Schieberegler, um die Größe der Web-Seite zu verringern.
Medienabfragen visuell bearbeiten
Größenänderungsgriffe werden angezeigt. Für Media Queries, die sowohl min- als auch max-width-Werte haben, erscheinen Größenziehpunkte auf beiden Seiten der Leiste.
Ziehe die Ziehpunkte auf die gewünschte Größe.
Die Medienabfragen werden automatisch mit den neuen Werten für min-width und/oder max-width aktualisiert. Es wird eine Benachrichtigung angezeigt, dass die Medienabfrage erfolgreich bearbeitet wurde. Wenn mehrere visuelle Medienabfragen einer Leiste für visuelle Medienabfragen entsprechen, werden alle Medienabfragen aktualisiert. Die Anzahl der Media Queries, die aktualisiert wurden, wird zusammen mit der Erfolgsmeldung angezeigt.
Drücke Strg+Z (Win) oder Cmd+Z (Mac), um rückgängig zu machen.
Alternativ kannst du auf die Breakpoint-Werte doppelklicken, um die Werte mit deiner Tastatur einzugeben.
Neue Media Queries hinzufügen
Ziehe den Schieberegler entlang des Lineals auf die gewünschte Größe.
Klicken Sie auf 
.
Im eingeblendeten Popup-Fenster ist standardmäßig die Option „max-width“ ausgewählt. Um min-width oder min-max zu spezifizieren, wähle die entsprechende Option in der Dropdown-Liste aus und wähle die gewünschten Einheiten.
Wähle dann eine CSS-Quelle aus, in die die Media Query hinzugefügt werden soll.
Wenn Sie auswählen, dass eine neue CSS-Datei erstellt werden soll, wird ein weiteres Popupfenster angezeigt. Gib den Namen und den Pfad der neuen CSS-Datei an und klicke auf OK.
Um rückgängig zu machen, drücke Strg+Z (Win) oder Cmd+Z (Mac).
Media Queries löschen
Rechtsklicke auf die entsprechende Visual Media Query-Leiste.
Klicke auf Löschen und dann auf die Media Query, die du löschen möchtest.
Klicke auf OK, um zu bestätigen, dass du alle Media Queries und die zugehörigen Selektoren löschen möchtest.
Zum Rückgängigmachen drücke Strg+Z (Win) oder Cmd+Z (Mac).
Code für Media Queries anzeigen
Rechtsklicke auf die gewünschte Visual Media Query-Leiste und bewege deine Maus über Zum Code wechseln.
Eine Liste aller Media Queries in diesem bestimmten Breakpoint-Bereich zusammen mit den Dateien, in denen sie deklariert sind, erscheint.
Klicke auf die gewünschte Media Query, um zum entsprechenden Code in der Code-Ansicht zu navigieren.
Wenn die Code-Ansicht nicht sichtbar ist, wird das Dokument in die geteilte Ansicht umgeschaltet, um den Code anzuzeigen.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
