WebImpressionen
Responsives

Für die Responsive Gestaltung einer Webseite werden immer neuere css-möglichkeiten erstellt.

  • Ein Layout mit :nth-child(); ist begrenzt geeignet für eine Responsive Gestaltung.
    Funktioniert ab IE 9.
  • Ein Layout mit float ist begrenzt geeignet für eine Responsive Gestaltung.
    Funktioniert ab IE 6.
  • Ein Layout mit flex ist einfach und gut geeignet für eine Responsive Gestaltung.
    Funktioniert ab IE 10.
  • Ein Layout mit grid ist schwer und sehrgut geeignet für eine Responsive Gestaltung.
    Funktioniert in den meisten Browsern die css 3 kompatibel sind.
    Die Browser (IE-10 & IE-11) müssen extra angesprochen werden!

Das einspalten-Layout zB.: für Smartphones sieht von oben nach unten so aus wie der html-code geschrieben ist.

<div class="div1"> Spalte 1 </div>
<div class="div2"> Spalte 2 </div>
<div class="div3"> Spalte 3 </div>
<div class="div4"> Spalte 4 </div>
<div class="div5"> Spalte 5 </div>
<div class="div6"> Spalte 6 </div>


Mit der CSS-Klasse display:table; & display: table-cell;
ist der erste Container immer oben-links.

Spalte 1
Spalte 2
Spalte 3
Spalte 4
Spalte 5
Spalte 6
html:
<div id="box">
<div class="div1"> Spalte 1 </div>
<div class="div2"> Spalte 2 </div>
</div>
<div id="box1">
<div class="div3"> Spalte 3 </div>
<div class="div4"> Spalte 4 </div>
</div>
<div id="box2">
<div class="div5"> Spalte 5 </div>
<div class="div6"> Spalte 6 </div>
</div>

css:
#box, #box1, #box2 {
display: table;
width: 100%;
}

div {
display: table-cell;
}

#box div:nth-child(1) {
width: 25%;
}

#box div:nth-child(2) {
width: 75%;
}

#box1 div:nth-child(1) {
width: 75%;
}

#box1 div:nth-child(2) {
width: 25%;
}

#box2 div:nth-child(1) {
width: 50%;
}

#box2 div:nth-child(2) {
width: 50%;
}

...

Mit der CSS-Klasse float ist der erste Div-Container auch immer oben-links.

Spalte 1
Spalte 2
Spalte 3
Spalte 4
Spalte 5
Spalte 6
html:
<div class="div1"> Spalte 1 </div>
<div class="div2"> Spalte 2 </div>
<div class="div3"> Spalte 3 </div>
<div class="div4"> Spalte 4 </div>
<div class="div5"> Spalte 5 </div>
<div class="div6"> Spalte 6 </div>

css:
.div1, .div2, .div3,
.div4, .div5, .div6 {
float:left;
}

.div1 {
width: 25%;
}

.div2 {
width: 75%;
}

.div3 {
width: 75%;
}

.div4 {
width: 25%;
}

.div5 {
width: 50%;
}

.div6 {
width: 50%;
}

...

Mit der CSS-Klasse flex ist der erste Container immer im übergeordneten-Container.

Spalte 1
Spalte 2
Spalte 3
Spalte 4
Spalte 5
Spalte 6
html:
<div id="box">
<div class="div1"> Spalte 1 </div>
<div class="div2"> Spalte 2 </div>
</div>
<div id="box">
<div class="div3"> Spalte 3 </div>
<div class="div4"> Spalte 4 </div>
</div>
<div id="box">
<div class="div5"> Spalte 5 </div>
<div class="div6"> Spalte 6 </div>
</div>

css:
#box {
display: flex;
}

.div1 {
flex: 1;
order: 1;
}

.div2 {
flex: 2;
order: 2;
}

.div3 {
flex: 2;
order: 1;
}

.div4 {
flex: 1;
order: 2;
}

.div5 {
flex: 1;
order: 1;
}

.div6 {
flex: 1;
order: 2;
}

...

Mit der CSS-Klasse grid kann der erste Container sein wo er hingesetzt wird, somit ist auch das Einspalten-Layout beeinflußbar.

Mit den CSS-Klassen display:table, float sowie flex lassen sich Container nur eindimensional beschreiben.
Mit der CSS-Klasse grid hingegen lassen sich zwei Dimensionen beschreiben.

Spalte 1
Spalte 2
Spalte 3
Spalte 4
Spalte 5
Spalte 6
html:
<div id="box">
<div class="div1"> Spalte 1 </div>
<div class="div2"> Spalte 2 </div>
<div class="div3"> Spalte 3 </div>
<div class="div4"> Spalte 4 </div>
<div class="div5"> Spalte 5 </div>
<div class="div6"> Spalte 6 </div>
</div>

css:
#box {
display: grid;
grid-template-columns: repeat(3, 1fr); // 3 Spalten pro Zeile
}

.div1 {
grid-column: 1; // Spalte
grid-row: 1 / 3; // Zeilen Anfang / Zeilen Ende
}

.div2 {
grid-column: 2 / 4; // Spalten Anfang / Spalten Ende
grid-row: 1; // Zeile
}

.div3 {
grid-column: 2 / 3;
grid-row: 2;
}

.div4 {
grid-column: 3 / 4;
grid-row: 2 / 4;
}

.div5 {
grid-column: 1;
grid-row: 3;
}

.div6 {
grid-column: 2;
grid-row: 3;
}

...

Ein Layout mit festen Größen ist heutzutage ungeeignet.
Ein Layout mit einer festen Breite von z.B. 1024 Pixel sieht auf einen 4k Display sehr klein aus und auf einem 600 Pixel Display muß in der Breite gescrollt werden.

Alle Beispiele in dieser Kategorie ist Grundlegendes Anschauungs-Material.