CSS/Tutorials/Grundstruktur
Grundstruktur
Als Grundstruktur verwenden wir unsere Webseite aus dem HTML-Tutorial:
<body>
<header>
<!--- Kopfzeile --->
</header>
<main>
<!--- Inhalt --->
</main>
<aside>
<!---weiterführende Informationen --->
</aside>
<footer>
<!--- Fußzeile --->
</footer>
</body>
Responsivität
Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines meta-Elements dafür sorgen, dass sich die Seite an den Viewport anpasst.
Notieren Sie dazu folgende Zeile im head der Seite:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Für weitere Erklärungen siehe HTML/Elemente/meta#Viewport einstellen.
Maximale Breite festlegen
Textzeilen, die sich über die gesamte Breite eines großen 4k-Monitors erstrecken, sind nur schwer lesbar.
Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, wurde dem body der Beispielseite eine maximale Breite zugewiesen.
body {
margin: 0 auto;
max-width: 60em;
}
Mit margin: 0 auto wird die Seite zentriert.
Für <body> ist die CSS-Eigenschaft max-width: 60em; angegeben, um der Seite eine maximale Breite zu geben. Bei kleineren Viewports verringert sich die Breite, sodass die Seite nie breiter als der Bildschirm wird.
Verwenden sie für Ihr Layout keine festen Breitenangaben in Pixel. Wenn ein Benutzer die Schriftgröße im Browser ändert, wird im schlimmsten Fall Ihr Layout zerschossen.
Breitenangaben in relativen em passen Ihre Webseite flexibel an die Schriftgröße an!
