Responsives Design beschreibt nur, dass sich dein Design auf die unterschiedlichen Anforderungen der Anzeigegeräte anpasst. Dafür gibt es verschiedene Angriffspunkte:
VIEWPORT-META-TAG
Zu allererst solltest du im HEAD-Bereich deiner Webseite das viewport-meta-tag setzen. Das sorgt dafür, dass der Inhalt deiner Webseite grundlegend an den Viewport (Also den Bildschirm) des Anzeigegeräts angepasst wird:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Was genau dieses Tag macht, kannst du dir Hier anschauen.
CSS
Für die nächsten 90% deines Responsiven Designs brauchst du CSS (Cascading Style Sheet). CSS gibt deinen Inhalten ihre Form und Farbe – und mithilfe von sog. media-queries sogar an verschiedene Situationen angepasst.
Schreibe folgendes in dein Stylesheet:
@media only screen and (max-width: 1000px) { }
Jede CSS-Style-Regel, die du jetzt in diese Media-Query setzt, wird erst dann aktiv, wenn das Browserfenster eine Breite von unter 1000 Pixeln hat.
Hier findest du eine Übersicht über Media-Queries.
JAVASCRIPT
Und jetzt die letzten paar Prozentpunkte: JavaScript. Anmekrung dazu: Sehr wahrscheinlich wirst du für dein Responsives Design wenig bis kein JavaScript brauchen – und wenn dann kein kompliziertes.
JavaScript ist grundsätzlich für die Funktion deiner HTML-Elemente zuständig. Wenn du z.B. eine Navigationsleiste auf dem Handy verschwinden lassen, und sie per Knopfdruck auklappen lassen willst, lässt sich fast alles daran (Das Verschwinden lassen, andere Anordnung der Navigationslinks, etc.) mit den Media-Queries lösen.
Fast. Denn für die Funktion dieses Knopfs brauchst du jetzt JavaScript.
