The Girl In The Red Jacket A Responsive Template
Sextus

This is Sextus.

Infos zur Technik

Übersicht

Diese Responsive-Vorlage arbeitet mit der Mobile-First-Technik. Wir verwenden hier überhaupt kein Javascript, mit Ausnahme des Smooth-Scrolling (z.B. der Nach-Oben-Pfeil im Fussbereich). Außerdem arbeiten wir mit dem Border-Box-Model (box-sizing: border-box) sowie der Maßeinheit für Prozentschrift namens REM.


One Picture. Pro id homero scaevola. Sed id lucilius voluptaria, duo ut meis euismod feugiat. Vix convenire dissentiet an, ad lorem quando. Clita quaestio usu ad. Ex tractatos explicari pri. Posidonium reprimique ne ius, eam probo quodsi alienum eu, patrioque conceptam incorrupte. Es bella documenta individualis.


Was heisst eigentlich Mobile-First?

Die in Bezug auf das Responsive Webdesign angesagte Mobile-First-Technik (von klein auf groß) bietet eine bessere Performance-Leistung gegenüber der Desktop-First-Technik (von groß 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öße bezüglich der Mindestbreite (min-width) - andere, abweichende, größere Bildschirmauflösungen, wie Tablet, Notebook, Laptop und schließlich Desktop-PC angesprochen.


Beautiful Pictures. Dolor sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te. Minim oportere principes velad, cum ut augue eligendi
Lorem ipsum dolor sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.
Lorem ipsum dolor sit amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in. Mea Culpa Nomen es Omen. Enjoy.


Schrifteinheit REM

Wir verwenden als Schrifteinheit nicht PX, PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible Schriftgrößen, 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öße 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äßt 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 oder so ähnlich, denn dies ist ein Beispiel, sieht es dann der Code in der CSS-Datei aus:
CSS
html {
font-size:62.5%;
line-height:1.5;
font-family: georgia, helvetica, serif;
}
Dann folgen die Angabe der Schriftgröße und der Überschriften.
CSS
body {font-size:1.7rem}
h1 {font-size:3.4rem}
h2 {font-size:2.5rem}
h3 {font-size:1.9rem}
Nachfolgend zwei Beispiele für die prozentmässige Weitervererbung innerhalb der CSS Media Queries:
Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert und auch bei der Abfrage ab 1280 Pixel reicht der geänderte Prozentwert.
CSS
@media (min-width: 1024px) {
html {font-size: 68% }
}
@media (min-width: 1280px) {
html {font-size: 72% }
}

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 zur 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öße des Root-Elements ist auf 100% gesetzt und man geht von der 16px Standard-Schriftgröße aus.

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


Lorem Box 1

Sie sehen nachstehend 8 Boxen. Hier der Inhalt für die erste Sidebar Box 1. Please Enjoy!

Lorem Box 2

Hier der Inhalt für die Sidebar Box 2. Viel Spaß mit diesem Template. Dies ist Beispiel Text.

Lorem Box 3

Hier der Inhalt für die Sidebar Box 3. Te incorrupte efficiendi nec, vim ne labore salutandi iracundia. Vim ex eius laoreet noluisse. Et nam aeque primis, pri ad posidonium constituam. Eos latine molestie no, etiam electram explicari pro cu, mei rebum inermis vituperatoribus cu. Detraxit forensibus deterruisset no vel.

Lorem Box 4

Bildtext für Foto in Box 4. This is a girl relaxing at the pool.

Lorem Box 5

Hier der Inhalt für die Sidebar Box 5. Diam electram ex est, ad nec noluisse convenire. Mei quem omittantur dissentiet ut, idque graece nominavi ut his.

Lorem Box 6

Bildtext für Foto in Box 6. Nice girl in red jacket and black shorts.

Lorem Box 8

Hier der Inhalt für die Sidebar Box 8. Diam electram ex est, ad nec noluisse convenire. Mei quem omittantur dissentiet ut, idque graece nominavi ut his.

Social Media



Kontakt

Tel: +49 089 12345 67
Fax: +49 089 12345 68
infokontaktmail@muster.de

More

Legal Conditions


Find Us

Professor Dr. Archibald Robertson
Roxanne Street No. 12
Great Britain - London