Responsive Webdesign - Rasteransicht

Was ist ein Rasteransicht?

Viele Webseiten basieren auf dem Rasteransicht (grid-view), was bedeutet, dass die Seite in mehrere Spalten unterteilt wird:

Bei der Gestaltung von Webseiten ist die Verwendung eines Rasteransichtes sehr hilfreich. Dies ermöglicht eine einfachere Platzierung von Elementen auf der Seite.

Responsive Rasteransichten haben in der Regel 12 Spalten, eine Gesamtbreite von 100% und dehnen sich bei der Anpassung der Browserfenstergröße aus und zusammen.

Aufbau eines responsiven Rasteransichtes

Lassen Sie uns mit dem Aufbau eines responsiven Rasteransichtes beginnen.

Stellen Sie zunächst sicher, dass alle HTML-Elemente box-sizing der Eigenschaft ist border-boxDies stellt sicher, dass die gesamte Breite und Höhe des Elements die Innenabstände (Füllung) und die Ränder einschließen.

Fügen Sie im CSS den folgenden Code hinzu:

* {
  box-sizing: border-box;
}

Bitte besuchen Sie unsere CSS Box Sizing Lesen Sie im Kapitel mehr über das Attribut box-sizing.

Das folgende Beispiel zeigt eine einfache responsive Webseite, die zwei Spalten enthält:

25%
75%

Beispiel

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Probieren Sie es selbst aus

Wenn die Webseite nur aus zwei Spalten besteht, ist das obige Beispiel noch gut.

Wenn die Webseite nur aus zwei Spalten besteht, ist das obige Beispiel noch gut.

Zunächst müssen wir den Prozentsatz eines Spalten berechnen: 100% / 12 Spalten = 8.33%.

Dann erstellen wir für jedes der 12 Spalten eine Klasse, nämlich class="col-" und einer Zahl, die die Anzahl der Spalten definiert, die dieses Abschnitt überqueren sollen:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Probieren Sie es selbst aus

Alle diese Spalten sollten links floaten und eine Innenabstand von 15px haben:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Jede Reihe sollte von <div> Die Spalten innerhalb des Textes sollten in der Regel eine Gesamtbreite von 12 betragen:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Alle Spalten innerhalb des Textes float links, was dazu führt, dass sie aus dem Seitenaufbau herausfließen und andere Elemente platzieren, als wären diese Spalten nicht vorhanden. Um dies zu verhindern, fügen wir eine Style zur Löschung des Flusses hinzu:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Wir möchten noch einige Stile und Farben hinzufügen, um sie schön aussehen zu lassen:

Beispiel

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

Probieren Sie es selbst aus

Bitte beachten Sie, dass die Beispiel-Webseiten nicht ideal aussehen, wenn Sie das Browserfenster auf eine sehr kleine Breite einstellen. In dem nächsten Kapitel werden Sie lernen, wie Sie dieses Problem lösen können.