Eine Website wird immer mit CSS(Cascading Style Sheets) gestylt bzw. im Aussehen optimiert. Bis zur Version CSS2 konnte man nur stumpf Regeln definieren. Dies war auch der Grund, warum Desktop und Mobile Websites immer getrennt voneinander entwickelt wurden. Doch mit der Einführung von CSS3 änderte sich das rapide. Denn mit Version CSS3 kam die wichtigste Neuerung Media Queries. Durch Media Queries wurde es möglich Eigenschaften des aktuellen Gerätes direkt abzufragen. Verfügbare Geräteeigenschaften sind: Breite und Höhe des Browserfensters, Format (Quer- oder Hochformat), Bildschirmauflösung. Daher eine für responsives Webdesign wesentliche Voraussetzung.
Beispiel 1:
body {
background-color: red;
}
Beispiel 2:
@media screen and (max-width: 960px) {
body {
background-color: lime;
}
}
Erklärung:
In Beispiel 1 geben wir dem element body eine Hintergrundfarbe Rot. Im zweiten Beispiel setzen wir durch einen Media Querie die Hintergrundfarbe auf Hellgrün. Falls wir uns das Ergebnis auf einem Smartphone anschauen würden, würden die Farbe Hellgrün sehen. Da die Browser Breite des Smartphones nicht über die 960px Breite kommt. Ansonsten sehen alle mit Desktop Rechnern die Farbe Rot. Da sich die Bildschirm Auflösung bei über 960px befindet. Schieben wir den Browser auf dem Desktop zusammen sollten wir bei exakt 960px die Farbe Hellgrün wieder sehen können.