Operation Manual

Visuelle Medienabfragen

Nach oben

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. Auf

Grundlage dieser Regeln werden beim Rendern von Inhalten verschiedene Bedingungen berücksichtigt, z. B.

Bildschirmgröße, Browserfenstergröße, Gerätegröße, Ausrichtung und Auflösung.

Sie können Medienabfragen mit der Regel @media zu CSS-Dateien hinzufügen. Alternativ können Sie

separate Stylesheets für verschiedene Medientypen erstellen und diese dann mit der folgenden Syntax

aufrufen:

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. Darüber hinaus können Sie in Dreamweaver Medienabfragen auf einfache Weise über

folgende Optionen erstellen und verwalten:

Leiste für visuelle Medienabfragen

CSS Designer

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

Visuelle Medienabfragen ausblenden oder einblenden

Zwischen Haltepunkten wechseln

Medienabfragen visuell bearbeiten

Neue Medienabfragen hinzufügen

Medienabfragen löschen

Code für Medienabfragen anzeigen

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.

218