Was ist Responsive

Eine Webseite ist Responsive wenn Sie sich der Auflösung des Endgerätes anpasst. Das heist eine Webseite besitzt unterscheidliche Darstellungen für unterschiedliche Auflösung oder Seitenverhältnisse. Die Motivation für Responsive desings besteht darin auch Display mit kleinen Auflösungen ein gutes Erlebniss beim surfen zu verschaffen.

Oftmals ist es so das bei nicht responsive Webseiten, die mit einer zu niedrigen oder zu großen Auflösung betrachtet werden, Inhalte verloren gehen.

CSS Media Query’s

Media Query’s sind ab CSS 3 Verfügbar. Mit Ihnen ist es möglich Webseiten Layouts für verschiedene Endgeräte zu erstellen. Dabei gibt es mehrere Möglichkeiten Media Query’s in das HTML Dokument einzubinden.

Als erstes benötigen wir dieses snipet welches den Tablets und Smartphones sagt das sie die Webseite mit ihrer nativen Auflösung darstellen sollen.

<meta name="viewport" content="width=device-width">

Geben wir diese Zeile nicht an versuchen die Browser mit kleinerer Auflösung die Seite so zu Skalieren das die Desktop CSS angezeigt wird.

Die erste Möglichkeit wäre im Head des HTML Dokuments folgende CSS Datein zu deklarieren.

<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/desktop.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (max-width: 700px) ' href='css/phone.css' />

mit folgenden befehlen laden wir für unterschiedliche Auflösungen unterschiedliche CSS Dateien.

Die Zweite möglichkeit ist innerhalb einer CSS Datei mehrere Bereiche zu definieren

@media all and (max-width: 700px) 
{
/* Smartphone */
}

@media all and (max-width: 1000px) and (min-width: 701px)
{
/* Tablet */
}
@media all and (min-width: 1001px) 
{
/* Desktop */
}

Mit den Media Query’s kann man auch noch mehr machen. Man kann z.B. auch Layouts zum Drucken bestimmen oder für die Ausgabe auf Projektoren und andere Endgeräte anpassen.

eine Ausführliche Beschreibung findet ihr hier http://www.w3.org/TR/css3-mediaqueries/