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)">

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:

    1. Klicken Sie auf „Festlegen“.

    2. Wählen Sie „Neue Datei erstellen“ aus.

    3. 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 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ählen Sie „Vorhandene CSS-Datei verwenden“ aus und wechseln Sie zur CSS-Datei für das Gerät.

    Wenn Sie eine CSS-Datei angeben möchten, die noch erstellt werden muss, wählen Sie „Neue Datei erstellen“ aus. Geben Sie den Namen der CSS-Datei ein. Die Datei wird dann nach dem Klicken auf „OK“ erstellt.

  8. Klicken Sie auf „OK“.

  9. Bei einer siteübergreifenden Medienabfrage wird eine neue Datei erstellt. Speichern Sie sie.

Siteübergreifende Medienabfrage: Stellen Sie bei vorhandenen Seiten sicher, dass Sie die Datei für die Medienabfrage in allen Seiten in das <head>-Tag einfügen.

Beispiel für eine Verknüpfung mit einer Medienabfrage, wobei „mediaquery_adobedotcom.css“ die Datei für die siteübergreifende Medienabfrage für die Website „www.adobe.com“ ist:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Vorhandene Datei für die Medienabfrage verwenden

  1. Erstellen Sie eine Webseite oder öffnen Sie eine vorhandene Webseite.

  2. Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.

  3. Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.

  4. Klicken Sie auf „Festlegen“.

  5. Wählen Sie „Vorhandene CSS-Datei verwenden“ aus, wenn Sie bereits eine CSS-Datei mit der Medienabfrage erstellt haben.

  6. Wechseln Sie durch Klicken auf das Symbol zum Durchsuchen zu der Datei und geben Sie sie an. Klicken Sie auf „OK“.

  7. Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.

  8. 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">
  9. Klicken Sie auf „OK“.

Andere Datei für die siteübergreifende Medienabfrage auswählen

Führen Sie die folgenden Schritte aus, um die Datei für die siteübergreifende Medienabfrage zu ändern, die Sie im Dialogfeld „Medienabfragen“ festgelegt haben.

  1. Wählen Sie „Site“ > „Sites verwalten“ aus.

  2. Wählen Sie im Dialogfeld „Sites verwalten“ Ihre Site aus.

  3. Klicken Sie auf „Bearbeiten“. Das Dialogfeld „Site-Definition“ wird angezeigt.

  4. Wählen Sie im linken Fensterbereich unter „Erweiterte Einstellungen“ die Option „Lokale Info“ aus.

  5. Klicken Sie im rechten Fensterbereich unter „Datei für siteübergreifende Medienabfrage“ auf „Durchsuchen“, um die CSS-Datei für die Medienabfrage auszuwählen.

    Hinweis:

    Die Änderung der Datei für die siteübergreifende Medienabfrage hat keine Auswirkungen auf Dokumente, die mit einer anderen oder früheren Datei für die siteübergreifende Medienabfrage verknüpft sind.

  6. Klicken Sie auf „Speichern“.

Webseiten basierend auf Medienabfragen anzeigen

Die in einer Medienabfrage angegebenen Abmessungen werden in den Optionen für die Schaltfläche „Multi-Screen“ bzw. für die Fenstergröße angezeigt. Wenn Sie im Menü eine Abmessung auswählen, werden die folgenden Änderungen angezeigt:

  • Die Anzeigegröße ändert sich entsprechend den angegebenen Abmessungen. Die Frame-Größe des Dokuments bleibt unverändert.

  • Die in der Medienabfrage angegebene CSS-Datei wird zum Anzeigen der Seite verwendet.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie