Die Seite 2

Infos zur Technik

übersicht

Diese Responsive-Vorlage ist in Mobile-First codiert und komplett ohne Javascript. Ausserdem arbeiten wir mit dem Border-Box-Model (box-sizing: border-box) sowie der Masseinheit für Prozentschrift namens REM.

Mobile-First?

Die in Bezug auf das Responsive Webdesign angesagte Mobile-First-Technik (von klein auf gross) bietet eine bessere Performance gegenüber der Desktop-First-Technik (von gross; auf klein).
Das Coding für die kleinste mobile Bildschirmauflösung, nämlich das Smartphone, steht direkt am Anfang der CSS-Datei und wird somit sofort geladen, erst später im Code werden dann per Media Queries - Abfragen der Bildschirmgrösse bezüglich der Mindestbreite (min-width) - andere, abweichende, grössere Bildschirmauflösungen, wie Tablet, Notebook, Laptop und schliesslich Desktop-PC angesprochen.

Schrifteinheit REM

Wir verwenden als Schrifteinheit nicht PX, PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible Schriftgrössen, die sich prozentmässig anpassen. Beim TAG HTML setzen wir in der CSS-Datei die font -Angabe auf 62.5%, welches ca.10 Pixel (px) entspricht.

Hier noch ein Hinweis: Ein Wert von 100% entspricht 16 Pixel (px), wobei 16 Pixel die Standardgrösse bei Schriften im Browser ist.

Warum schreiben wir 62.5% statt 100%?
Damit wir nicht ständig die Formel (Pixelwert geteilt durch 16 = rem Wert) anwenden müssen, bei der es krumme, unübersichtliche rem-Werte gibt. Mehr zu der Formel mit Beispiel weiter unten. Es ist so, der umgerechnete Wert lässt sich viel leichter in Bezug zum gewohnten Pixelwert setzen, es erleichtert einfach das Arbeiten. Denn so ergibt sich zum Beispiel:

0.1 rem = 1 px
1 rem = 10 px
1.4 rem = 14 px
2.6 rem = 26 px


So sieht es dann der Code in der CSS-Datei aus - dies ist nur ein Beispiel - d.h. es kann natürlich Abweichungen je nach Template geben:

html {
font: 62.5%/1.5 georgia, helvetica, serif;
}

Die überschriften grösser, z.B.

h1 {font-size:3.4rem;}
h2 {font-size:2.5rem;}
h3 {font-size:1.9rem;}

Diese Werte werden dann prozentmässig weiter vererbt. Nachfolgend zwei Beispiele:

Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert.

@media (min-width: 1024px) {
html {
font: 68%/1.5 georgia,helvetica, serif;
}
}

Auch hier bei der höheren Auflösung und Abfrage der Bildschirmbreite ab 1280 Pixel reicht der geänderte Prozentwert.

@media (min-width: 1280px) {
html {
font: 72%/1.5 georgia,helvetica, serif;
}
}

Vorteil von REM: Die Schrift-Werte von z.B. body, h1, h2, h3 müssen nur ein einziges Mal ganz oben im Quellcode und dann nicht mehr wieder angegeben werden und vererben sich im genannten prozentualem Verhältnis einfach weiter. Das vermindert nicht nur den Quelltext sondern ist insbesondere auch relevant im Sinne von responsiven Templates.

Die allgemeine Formel (Root ist auf 100%): Umrechnung von Pixel zu REM.

Umgerechnet werden können Pixel-Werte, indem man den Pixelwert durch 16 teilt (18/16 = 1.125) Voraussetzung: Die Schriftgrösse des Root-Elements ist auf 100% gesetzt und man geht von der 16px Standard-Schriftgrösse aus.

Beispiel: Die Schriftgrösse von 18px entspricht 1.125rem.