Responsive Webdesign ist im mobilen Zeitalter des Internets das Um und Auf. Mobile CSS ermöglicht durch Media Queries (Media Regeln) wie @media only screen für mobile Displays Anpassungen an der Darstellung von Websites.
Media Queries: @media only screen
Die Abbildung zeigt im links oberen Bereich von Zeile 62-67 den Befehl:
@media only screen and (min-width: 750px) {
.btn-menu {
float: right;
margin: 0px 30px 0;
}
}
Dieser Befehl hat in Textform hier an dieser Stelle der Website nun keine Auswirkungen, da dieser Befehl im CSS-Code des Themes hinterlegt werden muss, damit dieser zur Anwendung kommt. Es gibt zwar Möglichkeiten CSS direkt im Inhaltsbereich mittels Editor zu platzieren, jedoch sollte dies in der Regel nicht zur Anwendung kommen.
Die Regel @media only screen gibt dem Browser den Befehl auf die jeweilige Bildschirmgröße (in diesem Fall) zu achten. In der Regel bezieht sich das stets auf die Breite (width) des jeweiligen Bildschirms. Die Höhe (height) bleibt generell ein variabler von den Media Queries unberührter Wert.
Die Media Regel definiert in diesem Fall mit dem Wert (min-width: 750px), dass alle weiteren CSS-Befehle, die sich zwischen den folgenden { und } befinden, auf alle Bildschirme bezieht die mindestens eine Bildschirmbreite von 750 Pixel haben. Das bedeutet im Umkehrschluss, dass für alle kleineren Bildschirme diese CSS-Befehle nicht gelten.
Die CSS-Befehle der CSS-Klasse .btn-menu definieren das Aussehen des HTML-Codes, welcher unter dieser Klasse erstellt worden ist. Der Name der Klasse gibt Aufschluss darüber, dass es sich hier um ein Menü handelt welches über einen Button (btn) aktiviert / angezeigt wird. Nun folgt im CSS Code ein weiterer Bereich, der zwischen { und } die CSS-Befehle dieser Klasse beinhaltet.
In diesem Fall ist erwünscht, dass der Inhalt mit dem Befehl float: right; rechtsbündig dargestellt wird und durch einen margin: (äußeren Abstand des Elements) links und rechts je 30 Pixel Abstand definiert ist.
Zum Abschluss muss nun diese Befehlskette mit zwei }} beendet werden, damit alle weiteren, darunter stehenden CSS-Befehle auf diese Media Regel nicht mehr zutreffen. Als kleiner Hinweis noch, beziehungsweise zur Erinnerung ist es wichtig zu beachten, dass generell bei CSS-Programmierung immer die jeweils im Code unterste Regel zur Anwendung kommt. Wenn man hier nicht strukturiert vorgeht, kann es zu Widersprüchen kommen, welche in der Prxis für Verwirrung sorgen.
Ein weiteres Beispiel für ein Media Query:
Um diese Thematik noch etwas verständlicher zu machen, hilft eventuell dieses Beispiel:
@media only screen and (max-width: 749px) {
.btn-menu {
margin: 0;
}
}
Hier geht es darum, dass alle Bildschirme mit einer maximalen Breite von 749px in Bezug auf die CSS-Klasse .btn-menu keinen Abstand anzeigen sollen. Der Befehl float wird in diesem Beispiel automatisch vom Eltern-Element übernommen. So kann man sehr logisch ganz individuelle Darstellungsregeln mit CSS aufbauen um eine Website präzise angepasst an die jeweilige Bildschirmbreite darzustellen.
Tipp um die jeweilige Bildschirmbreite in Pixel zu ermitteln:
Für Mozilla Firefox gibt es beispielsweise das praktische Add-On Measure-it, welches es erlaubt mit der Mouse die Breite und Höhe eines Bildschirmes in Pixel abzumessen.
Sollte Sie dennoch Fragen und/oder Probleme mit den Media Queries haben, so senden Sie mir Ihre Anfrage. Gerne stehe ich zu preiswerten Konditionen zur Verfügung.
