RWD – Anpassung an Handys und Tablets

Am bequemsten ist es, die Bootstrap-Bibliothek (getbootstrap.com) zu verwenden. Mit ihrer Hilfe ist die Internetseite in 12 Blöcke unterteilt, die Spalten bilden, der Befehl col. Die Unterteilung erfolgt in Abhängigkeit von der Auflösung des Geräts, auf dem sie angezeigt werden. Wir haben folgende Klassenarten zur Auswahl: xl (ab 1200 px), lg (ab 922px), md (ab 768px), sm (ab 576px):

<div class="container">
 <div class="row">
  <div class="col-12 col-sm-8 col-md-8">
  </div>
  <div class="col-12 col-sm-4 col-md-3 offset-md-1">
  </div>
 </div>
</div>

Sortierung der Blockreihenfolge nach Auflösung, der Befehl order:

<div class="container">
 <div class="row">
  <div class="col-6 col-sm-6 order-sm-2">
  </div>
  <div class="col-6 col-sm-6 order-sm-1">
  </div>
 </div>
</div>

Direkt im CSS3-Code können Medientypen mit Hilfe der media-query angepasst werden:

@media only screen and (min-width:992px) and (max-width:1199px){
}