WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag

Im 4. Teil des Video-Tutorials habe ich die Grundstruktur meines Layouts in den Theme-Dateien angelegt. Heute zeige ich, wie das Layout des WordPress-Themes mit Hilfe von CSS3 Media Queries und dem Viewport meta-tag responsive (engl. für reagierend, ansprechend) machen kann. Ein responsive Layout reagiert auf unterschiedliche Browser-Größen (z.B. bei der Ansicht des Themes auf einem Tablet PC oder einem Smartphone) und passt sich in der Layout-Breite entsprechend an.



Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer Vimeo-Seite.

Hilfreiche Link-Tipps
Codeschnipsel aus dem Video

Die CSS3 Media Queries können entweder über einen Link-tag unterhalb des Links zum style.css Hauptstylesheet innerhalb des head-tags eingefügt werden:

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="small.css" />

oder im style.css Hauptstylesheet unterhalb der CSS-Eigenschaften des Hauptlayouts über @media:

@media screen and (max-width : 1024px) {
hier CSS-Eigenschaften einfügen
}

Außerdem muss noch in der header.php Datei innerhalb des head-tags (möglichst ganz oben) der Viewport meta-tag eingefügt werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Wenn man dem Nutzer die Zoom-Option in einem mobilen Browsern weiterhin ermöglichen möchte nutzt man:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Wenn du weitere Fragen oder Ergänzungen zum Tutorial hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Nachricht!

Weitere Teile des WordPress Video-Tutorials

7 Kommentare zu “WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag

  1. hallo ellen,

    gut erklärt! – evtl. werden so noch mehr webworker auf mediaqueries aufmerksam. bzw. bekommen lust die mal zu nutzen :)
    eine frage habe ich noch: und zwar was für eine screencast software nutzt du?
    ich bin derzeit auf der suche, da ich zu webthemen auch videotuts erstellen möchte.

    gruß
    chris

    • Hallo Chris,

      vielen Dank für dein Feedback zum Video :-) Ich teste gerade auch noch etwas mit den Aufnahme-Programmen herum. Dieses Video habe ich mit Camtasia Studio aufgenommen. Von der gleichen Firma gibt es auch noch eine kostenloses Programm (Jing). Super wichtig ist auch ein gutes Aufnahme-Mikro, mit der Audio-Qualität hatte ich anfangs so einige Probleme. Ein etwas besseres USB-Mikro ist also wirklich sehr empfehlenswert :-)

      Viele Grüße,
      Ellen

  2. Hallo,
    klasse Anleitungen die du hier geschrieben hast, ach die anderen Teile sind sehr interessant.

    Was mir aber noch Fragen aufwirft, warum will man dem Besucher vorschreiben das er auf seinem Geräte nicht zoomen darf. Das erschließt sich mir nicht ganz. Denn man kennt seine Bedürfnisse ja nicht.

    Zum Glück gibt es ja dafür auch ein „Viewport“ Option.

    • Zunächst einmal: das ist ne super Tutorialreihe! Ein ganz großes Kompliment an Ellen! Was die Zoomfunktion bzw. deren Deaktivierung für Ipads, Smartphones angeht, kann ich Ben nur zustimmen! Mich selbst stört die Deaktivierung sehr, da ich bedingt durch recht schlechte Augen, stets die Zoomfunktion des Ipads bzw. Iphones nutze. Ich ärgere mich immer sehr, wenn die deaktiviert ist und manchmal verlasse ich diese Seiten dann sogar.
      Das ist einfach nur ein Feedback einer Nutzerin, die leicht sehbehinderte ist ;-)!
      Viele Grüße, Marion

  3. hallo ellen,

    mich würde mal interessieren, wie man auf diese ungeraden %-Angaben bei der Breite kommt. Wieso nimmt man nicht einfach runde Zahlen? Gibt es da nen bestimmten Grund?

  4. Hallo Ellen, vielen Dank für dein Video, das mir sehr weitergeholfen hat.

    Gibt es eigentlich eine Möglichkeit Elemente in WP-Themes gar nicht erst einzubinden, wenn z.B. eine Webseite/Blog mit einem Smartphone angesehen wird? Wahrscheinlich nicht, da PHP ja Serverseitig ausgeführt wird und keinen Zugrif fauf Media-Queries hat schätze ich? Es wäre ja viel praktischer Elemente erst gar nicht zu laden, als diese per CSS für Smartphones & Co. unsichtbar zu setzen.

    Desweiteren würde mich interessieren, ob man verschiedene Media-CSS-Dateien nur einbinden kann, wenn diese auch für das entsprechende Gerät benötigt werden? So bläht sich der CSS-Code in der style.css doch unnötig auf?

    Danke, großes Lob und Gruß
    -Max-

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *