Tutorials RWD

Alle Tutorial können zur privaten Nutzung kopiert bzw. benutzt werden. Bei kommerzieller Nutzung MUSS ein Hinweis zu kanedesign.de vermerkt werden!

Was ist RWD - Responsive Webdesign

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD, englisch responsive ‚reagierend‘) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

Quelle: wikipedia.org

06.02.2017 // Media Queriesnext

Media Queries geben an, was die Website ab einer bestimmten Breite machen soll. Dieser Code wird an das Ende der CSS Datei geschrieben.

@media only screen and (max-width: WERTem){
CSS Script }

only wird wegen alter Browser als Fallback Lösung genutzt.

Die Umrechung von Pixel (px) in ein relatives Element (em) ist recht einfach. 1em = 16px. Also rechnet man 1/16=0.0625em

Beispiel:
// body Standard Hintergrund limegreen
body {
background-color: limegreen;
}
// unter 40em wird der Hintergrung des body yellow
@media only screen and (max-width: 40em) {
body {
background-color: yellow;
}
}

05.02.2017 // Viewportend

Der Viewport ist das erste, was man setzen sollte, damit RWD auf einer Website an Mobilen Geräten angewendet wird. Dieser Code wird in den Meta Daten des Head Bereiches eingefügt.

<meta name="viewport" content="width=device-width, initial-scale=1">