Responsive Web-Design ist wie man HTML und CSS verwendet das es auf PC`s, Tablets und auf Smartphones die gewünschte Grösse anpasst.
Responsive heisst antwortend, reagierend, d.h., das Webdesign reagiert auf die Geräte und Viewports, die verwendet werden.
ohne Viewport-Meta-Angabe
Zuerst schauen wir uns die Seite mit einem Smartphone an ohne <meta name="viewport" content="width=device-width, initial-scale=1.0> Angabe
im <head>.
Mit Viewport-Meta-Angabe
Für responsive Web-Design füge folgenden Meta-Tag hinzu im <head>
Jetzt schauen wir uns die Seite mit dem oben beschriebenen Meta-Tag im <head> auf einem Smartphone an.
Mit CSS Viewport steuern
Media Queries in CSS
So können Sie mit Print ein paar gesonderte Angaben für den Ausdruck festlegen.
Im Beispiel wird die Navigation ausgeblendet durch display: none;
Die Navigation wird nicht gedruckt.
@media print {
nav {
display: none;
}
}
Mit CSS-3 Media-Queries lassen sich sich weiter Eigenschaften des Viewport abfragen.
Zunächste ist die Hintergrundfarbe dodgerblue und die Schrift schwarz.
Ab einer Viewportgrösse von 768px die Schrift weiss und der Hintergrund schwarz.
Ab einer Viewportgrösse von 1024px ist der Hintergrund grau und die Schrift orange.
Bei einer Viewportgrösse von 1025px wirken nun alle Angaben und es übernimmt die Angaben von @media screen and (min-width: 1024px)
weil dieses später geschrieben wurde und das früher geschriebene @media screen and (min-width: 768px) überschreibt. Das Media-Queries
unten nennt man auch First-Mobil Ansatz, weil vom es von kleinen Screens auf grosse verweist.
body {
padding 2rem;
font-family: arial;
font-size: 120%;
background-color: dodgerblue;
color: black;
}
@media screen and (min-width: 768px) {
body {
color : white;
background-color: black;
}
}
@media screen and (min-width: 1024px){
body {
color : orange;
background-color: grey;
}
}
Unten lassen sich kleine Screens anpassen.
Bis zu einer Viewportgrösse von 1024px die Schrift weiss und der Hintergrund schwarz.
Bis zu einer Viewportgrösse von 768px ist der Hintergrund grau und die Schrift orange.
Ab einer Grösse des Viewport von 1025px ist der Hintergrund dodgerblue und die Schrift schwarz.
Das Media-Queries unten nennt man auch First-Desktop Ansatz, weil vom es von grossen Screens auf kleine verweist.
body {
padding 2rem;
font-family: arial;
font-size: 120%;
background-color: dodgerblue;
color: black;
}
@media screen and (max-width: 1024px) {
body {
color : white;
background-color: black;
}
}
@media screen and (max-width: 768px){
body {
color : orange;
background-color: grey;
}
}
Responsive Layout mit Flexbox(zweispaltig)
Unten sehen Sie ein Beispiel indem mit Flexbox ein Layout realsiert wurde.
Es wird bei grossen Viewports zweispaltig dargestellt und bei kleinen Screens mit @media screen and(max-width: 530px) nur einspaltig.
<!doctype html>
<html>
<head>
<title>Page</title>
<style>
* {
box-sizing: border-box;
}
header {
background-color: grey;
color: black;
padding: 2rem;
}
main {
display: flex;
flex-direction: row;
}
.navi {
background-color: dodgerblue;
width: 25%;
padding: 2rem;
}
.inhalt {
background-color: black;
color: white;
width: 75%;
padding: 2rem;
}
footer {
background-color: grey;
color: black;
padding: 2rem;
}
@media screen and (max-width: 530px){
main {
display: flex;
flex-direction: column;
}
.navi, .inhalt {
width: auto;
}
}
</style>
</head>
<body>
<header>Hier ist der Header</header>
<main>
<div class="navi">
<strong>HTML</strong><br>
<strong>CSS</strong><br>
</div>
<div class="inhalt"><strong>Hier steht der Inhalt</strong></div>
Bei kleinen Screens bis @media screen and(max-width: 530px) wird das Layout einspaltig ausgegeben. Bei Screens bis @media screen and(max-width: 780px)
wird das Layout 2-spaltig und ab 780px wird es 3-spaltig dargestellt.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
* {
box-sizing: border-box;
}
.gridContainer {
display: grid;
grid-template-columns: 1fr 4fr 1fr ;
grid-template-rows: auto auto auto ;
grid-template-areas:
"kopf kopf kopf"
"navi inhalt seite"
"fuss fuss fuss ";
}
.item1 {
background-color: black;
color: white;
padding: 1rem;
grid-area: kopf;
}
.item2 {
background-color: dodgerblue;
color: black;
padding: 1rem;
grid-area: navi;
}
.item3 {
background-color: grey;
color: white;
padding: 1rem;
grid-area: inhalt;
}
.item4 {
background-color: #404040;
color: white;
padding: 1rem;
grid-area: seite;
}
.item5 {
background-color: black;
color: white;
padding: 1rem;
grid-area: fuss;
}
@media screen and (max-width: 780px){
.gridContainer {
display: grid;
grid-template-columns: 1fr 3fr ;
grid-template-rows: auto auto auto auto ;
grid-template-areas:
"kopf kopf "
"navi navi "
"seite inhalt"
"fuss fuss";
}
}
@media screen and (max-width: 530px){
.gridContainer {
display: block;
}
}
</style>
</head>
<body>
<div class="gridContainer">
<header class="item1"><p>Das ist der header</p></header>
<nav class="item2"><p>navi</p></nav>
<div class="item3"><p>Hier steht der Inhalt</p></div>
Wenn du möchtest dass ein Bild verkleinert werden kann, aber niemals grösser als sein Original skaliert wird, verwende max-width: 100%.
Mit height:auto; wird das Bild nicht verzerrt weil das height/width Verhältnis immer gleich bleibt.
Wenn Sie ein Bild auf eine maximale Grösse beschränken möchten, verwende max-width mit einem Pixelwert: max-width: 200px;
img {
max-width: 100%;
height: auto;
}
Responsives Formular
Zuerst wird das Formular für kleine Viewports bestimmt.
Das box-sizing: border-box; wird geschrieben(siehe Beispiel auf der Page CSS-float).
Es wird eine width-Angabe von 90% bestimmt und mit margin: auto; zentriert.
Mit dem Selektor .formular li label wird das <label> (Bezeichnung / Beschriftung) auf display: block gestellt (Blockelement = ganze Weite).
So stehen sie bei kleinen Viewports über den <input>- und <textarea> Eingabe-Feldern.
Für grössere Viewports @media screen and (min-width: 80em)(1em= Vertikale Größe der Schrift, relativ zur Schriftgröße des Eltern-Elements.
Über den Daumen gepeilt kann 1em als 16 Pixel gerechnet werden.) wird display: flex; geschrieben.
display: flex; ordnet bei Standard (flex-direction. row;) die Kindselemente nebeneinander. Flex: 1 0 25% bestimmt das Beschriftungen grösser
werden dürfen (flex-grow: 1), aber nicht kleiner (flex-shrink: 0) und die Optimalbreite 25% ist.
Der <header class="reNa"> ist der umschliessende Container für <a class="logo"> und <nav class="reponsiveNav"> und im wird eine
Weite von 100% vorgegeben und nach links gefloatet. Dem Element <a class="logo"> wird mit display: block und width: 100% die ganze Breite
spendiert (so rutscht das nachfolgende Element in eine neuen Zeile). Dem Container <nav class="responsiveNav"> wird ebenefalls ein Weite von
100% zugewiesen und nach links gefloatet. Die darin enthalten <li>-Elmente werden mit float:left und einer von Weite 100% ebenfalls
untereinander angezeigt (weil bei einer Breite von 100% die Listen-Elemente nicht mehr nebeneinander Platz haben, werden sie untereinander dargestellt).
Responsive Navigation mit @media screen and (min-width: 640px)
Mit dem @media screen and (min-width: 640px) wird auf grössere Viewports verwiesen.
Ab einer Breite von 640px wird das <a class="logo"> nach links gefloatet im umschliessend Container <header class="reNa"> und die
Listen-Elemente nach rechts gefloatet mit width:auto; (nur so Breite werden wie der Inhalt der Listen-Elemente).
Breakpoints sind die Eckdaten, an denen sich das Layout ändert, um sich besser an eine Geräteklasse anzupassen.
Sie werden durch Media Queries festgelegt.
Denn optimalen Breakpoint gibt es nicht, weil es in der Zwischenzeit alle Grössen von Bildschirmen gibt.
Dies sieht man an der Grafik:
Von groß nach klein – Der CSS-Code bei Desktop First
Beginnen wir mit der klassischen »Desktop-First«-Version.
Die Desktop-Ansicht unserer Beispiel-Website wird mit Media Queries für die Ansicht auf Tablets und Smartphones angepasst.
Mobile-First – Mit weniger CSS-Code die selbe Ansicht erreichen
Beim »Mobile First«-Prinzip wird der CSS-Code anders herum aufgebaut. Ganz oben im Dokument steht,
wie die mobile Darstellung aussehen soll. Weiter unten folgen dann die Media Queries für größere Ansichten.
Unter dem Strich erreicht man so das gleiche visuelle Ergebnis, bei weniger Code. Das wiederum führt zu schnelleren Websites.
