Erstellen Sie eine Webseite.
Zuletzt aktualisiert am
27. April 2021
Durch Medienabfragen können Sie basierend auf den gemeldeten Eigenschaften eines Geräts CSS-Dateien festlegen (reaktionsfähiges Design). 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)">
Eine umfassende Einführung in Medienabfragen findest du in Don Booths Artikel im Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Weitere Informationen zu Medienabfragen vom W3C findest du unter www.w3.org/TR/css3-mediaqueries/.
Erstellen von Medienabfragen
In Dreamweaver kannst du eine websiteweite Medienabfragedatei oder eine dokumentspezifische Medienabfrage erstellen.
Bereichsweite Medienabfrage-Datei
Legt Anzeigeeinstellungen für alle Seiten in deinem Bereich fest, die die Datei einbinden.
Die bereichsweite Medienabfrage-Datei fungiert als zentrales Repository für alle Medienabfragen in deinem Bereich. Nachdem du diese Datei angelegt hast, verknüpfe sie mit Seiten in deinem Bereich, die die Medienabfragen in der Datei für ihre Anzeige verwenden müssen.
Dokumentspezifische Medienabfrage
Die Medienabfrage wird direkt in das Dokument eingefügt, und die Seite wird basierend auf der eingefügten Medienabfrage angezeigt.
Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.
Führen Sie einen der folgenden Schritte aus:
Um eine bereichsweite Medienabfrage-Datei zu erstellen, wähle Bereichsweite Medienabfrage-Datei aus.
Um eine dokumentspezifische Medienabfrage zu erstellen, aktivieren Sie die Option „Dieses Dokument“.
Bei einer siteübergreifenden Medienabfrage führen Sie die folgenden Schritte aus:
Klicken Sie auf „Festlegen“.
Wählen Sie „Neue Datei erstellen“ aus.
Geben Sie einen Namen für die Datei ein und klicken Sie auf „OK“.
Es ist möglich, dass einige Geräte ihre tatsächliche Breite nicht melden. Um Geräte zu zwingen, ihre tatsächliche Breite zu melden, stelle sicher, dass die Option Geräte zwingen, tatsächliche Breite zu melden aktiviert ist.
Der folgende Code wird in deine Datei eingefügt, wenn du diese Option auswählst.
<meta name="viewport" content="width=device-width">
Führen Sie einen der folgenden Schritte aus:
Klicke auf "+", um die Eigenschaften für die Medienabfrage-Datei zu definieren.
Klicke auf Standardvorgaben, wenn du mit den standardmäßigen Vorgaben beginnen möchtest.
Wähle Zeilen in der Tabelle aus und bearbeite ihre Eigenschaften mit den 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.
Anmerkung
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 festlegen möchten. Für gewöhnlich wird z. B. bei Mobiltelefonen mit einer Breite von maximal 320 Pixel im Feld „Min. Breite“ keine Eingabe vorgenommen.
CSS-Datei
Wähle Vorhandene Datei verwenden aus und durchsuche die CSS-Datei für das Gerät.
Wenn du eine CSS-Datei angeben möchtest, die du noch erstellen musst, wähle Neue Datei erstellen aus. Gib den Namen der CSS- Datei ein. Die Datei wird dann nach dem Klicken auf „OK“ erstellt.
Klicken Sie auf „OK“.
Bei einer siteübergreifenden Medienabfrage wird eine neue Datei erstellt. Speichern Sie sie.
Bereichsweite Media Query: Stelle bei vorhandenen Seiten sicher, dass du die Media Query-Datei in alle Seiten im <head>-Tag einbindest.
Beispiel eines Media Query-Links, bei dem mediaquery_adobedotcom.css die bereichsweite Media Query-Datei für die Seite www.adobe.com: ist
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Vorhandene Datei für die Medienabfrage verwenden
Erstellen Sie eine Webseite oder öffnen Sie eine vorhandene Webseite.
Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.
Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.
Klicken Sie auf „Festlegen“.
Wähle Vorhandene Datei verwenden aus, wenn du bereits eine CSS-Datei mit der Media Query erstellt hast.
Wechseln Sie durch Klicken auf das Symbol zum Durchsuchen zu der Datei und geben Sie sie an. Klicken Sie auf „OK“.
Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.
Um Geräte zu zwingen, ihre tatsächliche Breite zu melden, stelle sicher, dass die Option Geräte zwingen, tatsächliche Breite zu melden aktiviert ist.Der folgende Code wird in deine Datei eingefügt, wenn du diese Option auswählst.
<meta name="viewport" content="width=device-width">
Klicken Sie auf „OK“.
Eine andere seitenweite Medienabfrage-Datei auswählen
Verwende diese Vorgehensweise, um die bereichsweite Media Queries-Datei zu ändern, die du im Dialogfeld Media Queries festgelegt hast.
Wählen Sie „Site“ > „Sites verwalten“ aus.
Wählen Sie im Dialogfeld „Sites verwalten“ Ihre Site aus.
Klicken Sie auf „Bearbeiten“. Das Dialogfeld „Site-Definition“ wird angezeigt.
Wählen Sie im linken Fensterbereich unter „Erweiterte Einstellungen“ die Option „Lokale Info“ aus.
Klicke im Bereich Bereichsweite Media Query-Datei im rechten Bedienfeld auf Durchsuchen, um die Media Query-CSS-Datei auszuwählen.
Anmerkung
Das Ändern der bereichsweiten Medienabfrage-Datei wirkt sich nicht auf Dokumente aus, die mit einer anderen oder vorherigen bereichsweiten Medienabfrage-Datei verknüpft sind.
Klicken Sie auf „Speichern“.
Webseiten auf Basis von Media-Abfragen anzeigen
In einer Medienabfrage angegebene Abmessungen werden in den Optionen für Multiscreen-Button/Fenstergröße angezeigt.Wenn du eine Dimension aus dem Menü auswählst, sind die folgenden Änderungen zu sehen:
Die Anzeigegröße ändert sich entsprechend den angegebenen Abmessungen. Die Frame-Größe des Dokuments bleibt unverändert.
Die in der Media Query angegebene CSS-Datei wird verwendet, um die Seite anzuzeigen.
Ähnliche Themen
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
