Viewport und Normalize (GitHub: normalize.css)
<!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Vereinheitlichung der Styles, da jeder Browser unterschiedliche Standards nutz -->
<link rel="stylesheet" href="/css/normalize.css">Media Queries je nach Website anpassen und besser keine fixen Pixelwerte
/* Media Queries hier für Screens / ≥ 568px */
@media screen and (max-width: 35.5em) {
.navigation .inhalt {
float: none;
width: auto;
}
/* Liste innerhalb der Navigation ändern */
.navigation li {
display: inline-block;
}
}Clearfix: Blogbeitrag 2015
/*
Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt.
Andere Elemente verhalten sich daher so, als wären die gefloateten Elemente nicht vorhanden und
rutschen im Layout häufig an eine unerwünschte Stelle. Um Floats aufzuheben und somit das oben
beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* Für den IE6 und IE7 */
}