Aufgabenstellung

Ein HTML-Layout soll sich automatisch an die Gegebenheiten des Endgerätes anpassen, egal ob mobiles Endgerät oder eine Großleinwand

Ansatz

Responsive Design funktioniert durch die Verwendung des @media-Tags von CSS. Das Layout richtet sich an der Bildschirmauflösung und der Orientierung des Endgerätes

Lösung

Aufbau der CSS-Datei:

@media (min-width: 950px) 
{
  /* Hohe Auflösung */
}

@media (min-width: 450px) and (max-width: 900px)
{
  /* Mittlere Auflösung */
}

@media (max-width: 450px) 
{
  /* Kleine Auflösung */ 
}

Quelle: www.mariofink.de