Da Responsive Webdesign gerade in aller Munde ist, möchte ich hier ebenfalls mein Wissen mal unter die Leute bringen. Mein heutiger Tipp: Media QueryAber zuerst einmal: Was ist das überhaupt?

Im Webdesign Bereich ist dies ja nichts neues, immerhin kennen wir dies bereits aus Vorgängern des neuen HTML5/CSS3 – Standards.
Vor HTML5 und vorallem vor der aktuellen Browser Generation lief dies vorallem über folgender Hilfestellung ab:
[css]<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“ sylesheet.css“>[/css]
Der Punkt media war und ist immer noch ein wichtiges Instrument zur unterscheidung von CSS Dateien und ihren relevanten Bedeutungen. Aber im heutigen Zeitalter, das Zeitalter der Smartphones und Tablets benötigen wir einfach mehr als eine einfache Unterscheidung zwischen Print, Screen uvm.

Und hier die Lösung:
[html]media screen and (max-width: 600px) {
html {
font-family: sans-serif;
}
}[/html]
Das ganze ist zu lesen wie eine IF-Variable, sollte dieser Wert unterschritten werden, dann überschreibt dieser Code jeden vorhanden Code-Schnippsel mit selber Bezeichnung.

Also einfach mal antesten und ausprobieren!

Hinterlassen Sie einen Kommentar