---
title: "WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag"
author: "Ellen Bauer"
date: 2011-05-05
lang: de
source: https://elmastudio.de/wordpress-video-tutorial-teil-5-css3-media-queries-und-der-viewport-meta-tag/
---

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

Im [4. Teil des Video-Tutorials](https://elmastudio.de/wordpress-video-tutorial-teil-4-das-theme-layout-anlegen/) 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.

<https://player.vimeo.com/video/23314025?portrait=0>

Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch direkt auf unserer [Vimeo-Seite](https://vimeo.com/elmastudio).

## Hilfreiche Link-Tipps

- ausführliche Infos zur Verwendung von [CSS3 Media Queries bei W3C.org](https://www.w3.org/TR/mediaqueries-3/)
- hilfreicher Artikel zum Viewport meta-tag von David B. Calhoun
- die [Eigenschaften des Viewport meta-tags](https://developer.apple.com/safari/resources/) in einer übersichtlichen Tabelle in der Safari Developer Library

## 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

- [WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes](https://elmastudio.de/wordpress-video-tutorial-teil-7-header-und-hauptmenu-eines-themes/)
- [WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren](https://elmastudio.de/wordpress-video-tutorial-teil-6-wordpress-testdaten-importieren/)
- [WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen](https://elmastudio.de/wordpress-video-tutorial-teil-4-das-theme-layout-anlegen/)
- [WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung](https://elmastudio.de/wordpress-video-tutorial-teil-3-die-theme-ubersetzung/)
- [WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme](https://elmastudio.de/wordpress-video-tutorial-teil-2-das-toolbox-blank-theme/)
- [WordPress Video-Tutorial Teil 1: WordPress lokal installieren](https://elmastudio.de/wordpress-video-tutorial-teil1-wordpress-lokal-installieren/)