Responsives Design

Inhaltsverzeichnis

Erste Schritte: Responsives Design: Media Queries

In Zeiten, in denen Nutzer auf Smartphones, Tablets, Laptops und Desktop-Monitoren
mit unterschiedlichsten Bildschirmgrößen zugreifen, ist Responsives Design
essentiell. Dabei passt sich das Layout deiner Website automatisch an die verfügbare
Breite (und Höhe) an, sodass Inhalte stets übersichtlich bleiben. Ein zentraler
Baustein dafür sind die Media Queries in CSS.

Was sind Media Queries?

Media Queries ermöglichen es dir, bestimmte CSS-Regeln nur unter bestimmten Bedingungen
anzuwenden – beispielsweise, wenn das Fenster oder das Gerät eine bestimmte Breite
unterschreitet (Smartphone) oder überschreitet (Desktop).

@media (max-width: 600px) {
    /* CSS-Regeln, die nur greifen, 
       wenn die Bildschirmbreite 600px oder kleiner ist */
}

@media (min-width: 1024px) {
    /* Regeln ab einer Breite von 1024px oder mehr */
}

Damit kannst du Schriften, Layouts oder Navigationen anpassen, um jedem Gerät die
bestmögliche Darstellung zu bieten.

Mobile First vs. Desktop First

Im allgemeinen unterscheidet man zwei Philosophien:

Mobile First:
Du beginnst mit einer schlanken Version deiner Website (eine Spalte, größere
Touch-Buttons) und setzt min-width-Media Queries ein, um das Layout
bei größeren Bildschirmen zu erweitern.
Desktop First:
Du definierst zunächst ein Layout für große Bildschirme und nutzt max-width
für kleine Geräte.

Beide Ansätze sind gängig. „Mobile First“ hat den Vorteil, dass du Performance und
Benutzerfreundlichkeit für kleinere Devices priorisierst, was inzwischen für viele Projekte
ein gängiger Standard ist.

Beispiel: Mobile First

/* Grundlegende Styles für alle Geräte */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Standardlayout (z. B. für Smartphones) */
.container {
    width: 100%;
    padding: 10px;
}

/* Ab 600px aufwärts nutzen wir eine breitere Seite */
@media (min-width: 600px) {
    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
    }
}

/* Ab 900px aufwärts (z. B. Tablets oder schmale Laptops) */
@media (min-width: 900px) {
    .sidebar, .content {
        display: inline-block;
        vertical-align: top;
    }
    .sidebar {
        width: 30%;
    }
    .content {
        width: 68%;
    }
}

In diesem Beispiel wird die .container-Breite bei größeren Screens verkleinert,
damit nicht die volle Breite genutzt wird. Ab 900px verwandeln wir die Spalten
in eine zweispaltige Ansicht. Auf schmaleren Geräten (Smartphones) würden die
Elemente untereinander angeordnet sein.

Beispiel: Desktop First

/* Standardlayout: Desktop */
.container {
    width: 960px;
    margin: 0 auto;
}

/* Wird überschrieben, wenn kleiner als 600px */
@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

Hier definieren wir erst ein fixes Layout (960px breit). Mit max-width: 600px
wird die Layout-Breite wieder auf 100% gestellt.
D. h. – für kleine Displays (Smartphones) gibt es eine andere Regel.

Weitere Media-Features

Media Queries erlauben nicht nur Abfragen nach Breite, sondern auch nach:

orientation: portrait oder landscape
height: (max-height: 700px)
device-pixel-ratio: Retina-Displays etc.
und vieles mehr.

@media (orientation: portrait) {
    /* Gilt nur im Hochformat */
    .sidebar {
        display: none;
    }
}

Responsive Bilder & Breakpoints

Neben Layouts kannst du Bilder auf verschiedene Bildschirmgrößen anpassen –
etwa indem du mit max-width: 100% sicherstellst, dass ein Bild
nicht über den Rand hinausragt:

img {
    max-width: 100%;
    height: auto;
    display: block;
}

Außerdem sind Breakpoints (z. B. 600px, 900px, 1200px) gängig. Man legt
fest, ab welchen Punkten sich das Layout ändert, basierend auf der Zielgruppe
und den typischen Gerätegrößen (Smartphones, Tablets, Desktop).

Tipps für ein gutes Responsives Design

Verwende fließende Einheiten (%, em, rem):
Feste Pixelangaben sind manchmal okay, doch flexible Layouts passen sich
leichter an unterschiedliche Displaygrößen an.
Beginne schlank (Mobile First):
Wenn du anfängst, Seiten für kleine Bildschirme zu optimieren, vermeidest
unnötig aufgeblähte Strukturen und stellst sicher, dass die mobile Performance
gut ist.
Prüfe deine Layouts in mehreren Geräten:
Nutze Browser-Tools, um auf verschiedene Bildschirmbreiten zu testen.
So entdeckst du schnell unschöne Zeilenumbrüche oder verschobene Elemente.
Kein Overkill mit Media Queries:
Sei sparsam und wähle sinnvolle Breakpoints, anstatt für jedes Pixel einen
neuen Satz Regeln zu definieren.

Ein kleines Praxisbeispiel

/* Basis-Styles, Mobile First */
body {
    margin: 0;
    font-family: sans-serif;
}

header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin: 0 5px;
}

.content {
    padding: 20px;
}

/* Ab 600px */
@media (min-width: 600px) {
    nav li {
        margin: 0 20px;
    }
}

/* Ab 900px: Zwei Spalten Layout */
@media (min-width: 900px) {
    .layout {
        display: flex;
    }
    .sidebar {
        flex: 1;
        background-color: #eee;
        padding: 20px;
        margin-right: 10px;
    }
    .content {
        flex: 2;
        margin-left: 10px;
    }
}

Hier wächst unser Layout stufenweise: Auf Smartphones gibt es eine simple Ein-Spalten-Darstellung,
ab 600px bekommt die Navigation mehr Abstände, und ab 900px wechselt das Hauptlayout zu
einer Zwei-Spalten-Variante.

Fazit

Responsives Design ist heute ein Standard, da immer mehr
Zugriffe über mobile Geräte erfolgen. Mit Media Queries
passt du das Layout an verschiedene Viewport-Breiten an,
ohne separate Webseiten für Smartphones oder Tablets bauen zu müssen.
Ob du PHP-basierte Projekte realisierst oder statische
Seiten erstellst – Media Queries sorgen dafür, dass deine Inhalte
überall glänzen. Schau dir ein paar Breakpoint-Strategien an
und teste regelmäßig in unterschiedlichen Viewports,
um ein wirklich überzeugendes, responsives Erlebnis zu bieten.