Operation Manual

Erstellen von Medienabfragen (ab Version CS 5.5)
Nach oben
Erstellen von Medienabfragen
Vorhandene Datei für die Medienabfrage verwenden
Andere Datei für die siteübergreifende Medienabfrage auswählen
Webseiten basierend auf Medienabfragen anzeigen
Mithilfe von Medienabfragen können Sie basierend auf den gemeldeten Eigenschaften eines Geräts CSS-Dateien angeben. Der Browser auf
einem Gerät prüft die Medienabfrage und zeigt die Webseite unter Verwendung der entsprechenden CSS-Datei an.
Mit der folgenden Medienabfrage wird beispielsweise die Datei phone.css für Geräte angegeben, deren Anzeige eine Breite von 300 bis 320 Pixel
aufweist.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-
width: 320px)">
Ausführliche Informationen zu Medienabfragen finden Sie in Don Booths Artikel im Adobe Developer Center
www.adobe.com/go/learn_dw_medquery_don_de.
W3C-Informationen zu Medienabfragen finden Sie unter www.w3.org/TR/css3-mediaqueries/.
Erstellen von Medienabfragen
In Dreamweaver können Sie eine Datei für die siteübergreifende Medienabfrage oder eine dokumentspezifische Medienabfrage erstellen.
Datei für siteübergreifende Medienabfrage Gibt Anzeigeeinstellungen für alle Seiten in Ihrer Site an, die die Datei enthalten.
Die Datei für die siteübergreifende Medienabfrage dient als zentrales Repository für alle Medienabfragen in Ihrer Site. Nach dem Erstellen dieser
Datei müssen Sie auf den Seiten in Ihrer Site, die zur Anzeige die Medienabfrage in der Datei verwenden müssen, eine Verknüpfung zu der Datei
erstellen.
Dokumentspezifische Medienabfrage Die Medienabfrage wird direkt in das Dokument eingefügt und die Seite wird entsprechend der eingefügten
Medienabfrage angezeigt.
1. Erstellen Sie eine Webseite.
2. Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.
3. Führen Sie einen der folgenden Schritte aus:
Um eine siteübergreifende Medienabfragedatei zu erstellen, aktivieren Sie die Option „Datei für siteübergreifende Medienabfragen“.
Um eine dokumentspezifische Medienabfrage zu erstellen, aktivieren Sie die Option „Dieses Dokument“.
4. Bei einer siteübergreifenden Medienabfrage führen Sie die folgenden Schritte aus:
a. Klicken Sie auf „Festlegen“.
b. Wählen Sie „Neue Datei erstellen“ aus.
c. Geben Sie einen Namen für die Datei ein und klicken Sie auf „OK“.
5. Möglicherweise melden einige Geräte nicht die tatsächliche Breite. Stellen Sie sicher, dass die Option „Geräte anweisen, die tatsächliche
Breite zu melden“ aktiviert ist, damit Geräte auch die tatsächliche Breite melden.
Bei Aktivierung dieser Option wird der folgende Code in die Datei eingefügt.
<meta name="viewport" content="width=device-width">
6. Führen Sie einen der folgenden Schritte aus:
Klicken Sie auf das Symbol mit dem Pluszeichen („+“), um die Eigenschaften für die Datei für die Medienabfrage festzulegen.
Klicken Sie auf „Standardvorgaben“, wenn Sie mit den Standardvorgaben beginnen möchten.
7. Markieren Sie Zeilen in der Tabelle und bearbeiten Sie die Eigenschaften mithilfe der Optionen unter „Eigenschaften“.
Beschreibung Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise Mobiltelefon, TV, Tablet usw.
„Min. Breite“ und „Max. Breite“ Die CSS-Datei wird für Geräte verwendet, deren gemeldete Breite im Bereich der angegebenen Werte
liegt.
Hinweis: Geben Sie entweder für „Min. Breite“ oder für „Max. Breite“ keinen Wert ein, wenn Sie für ein Gerät keinen bestimmten Bereich
199