Media Queries und Mobile-First-Entwicklung
Schreiben Sie Breakpoints mit min-width-Media-Queries, erstellen Sie zuerst das mobile Layout und erweitern Sie es schrittweise für größere Bildschirme.
Media Queries und Mobile-First-Entwicklung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Media Queries?
Media Queries wenden CSS-Regeln nur an, wenn bestimmte Bedingungen erfüllt sind — beispielsweise wenn die Viewport-Breite über einem Schwellenwert liegt. Sie bilden die Grundlage des responsiven Designs und ermöglichen es einem Stylesheet, sich an jede Bildschirmgröße anzupassen.
Grundlegende Syntax
Eine Media Query umschließt einen CSS-Block in einer @media-Regel. Die darin enthaltenen Regeln werden nur angewendet, wenn die Bedingung zutrifft.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width im Vergleich zu max-width
min-width: Wendet Stile an, wenn der Viewport mindestens diese Breite hat (Mobile First). max-width: Wendet Stile an, wenn der Viewport höchstens diese Breite hat (Desktop First). Bevorzugen Sie für die Mobile-First-Entwicklung min-width.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobile-First-Ansatz
Schreiben Sie zuerst CSS für kleine Bildschirme (außerhalb jeder Media Query). Verwenden Sie anschließend Media Queries mit min-width, um für größere Bildschirme schrittweise weitere Komplexität hinzuzufügen. Dadurch entsteht weniger CSS für Benutzer mobiler Geräte und insgesamt saubererer Code.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Häufige Breakpoints
Wählen Sie Breakpoints anhand Ihrer Inhalte und nicht anhand bestimmter Geräte. Häufige Ausgangspunkte sind: 480px (große Smartphones), 768px (Tablets), 1024px (kleine Desktop-Bildschirme), 1280px (große Desktop-Bildschirme). Vermeiden Sie Breakpoints, die auf bestimmte Gerätemodelle zugeschnitten sind.
Medientypen
Neben der Bildschirmbreite können Sie Medientypen ansprechen: screen für Bildschirme und print für Drucker. Mit Print-Media-Queries können Sie das Aussehen einer Seite beim Drucken anpassen, etwa indem Sie die Navigation ausblenden oder Farben anpassen.
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Bedingungen mit and kombinieren
Verketten Sie Bedingungen mit and: Stile werden nur angewendet, wenn beide Bedingungen erfüllt sind. Verwenden Sie not und or für komplexere logische Ausdrücke.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Reagieren Sie auf die Einstellung des Dunkelmodus im Betriebssystem der Benutzerinnen und Benutzer. Stellen Sie standardmäßig ein dunkles Theme bereit, ohne einen Umschalter vorauszusetzen.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Berücksichtigen Sie Benutzerinnen und Benutzer, die weniger Bewegung bevorzugen, etwa aufgrund von Gleichgewichtsstörungen oder Epilepsie. Deaktivieren oder vereinfachen Sie Animationen innerhalb dieser Media-Query.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Container Queries — Die Zukunft
Container Queries (@container) wenden Stile abhängig von der Größe eines übergeordneten Containers statt vom Viewport an. Dadurch wird echte Responsivität auf Komponentenebene möglich. Sie werden seit 2023 von allen modernen Browsern unterstützt.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Logische Eigenschaften für RTL-Unterstützung
Verwenden Sie logische Eigenschaften wie margin-inline-start statt margin-left für Layouts, die sowohl in Sprachen mit Schreibrichtung von links nach rechts als auch von rechts nach links funktionieren. So machen Sie Ihre responsiven Layouts zukunftssicher.
Kurzer Check
Welche Vorgehensweise beschreibt die mobile-first-CSS-Strategie korrekt?
Zusammenfassung: Media Queries und Mobile-First
@media (min-width: N) für progressive Erweiterung nach dem Mobile-First-Prinzip. Schreiben Sie Basisstile für mobile Geräte ohne Queries. Fügen Sie für größere Bildschirme weitere Komplexität hinzu. Verwenden Sie prefers-color-scheme für den Dunkelmodus, prefers-reduced-motion für Barrierefreiheit und Container Queries für Responsivität auf Komponentenebene.
Häufig gestellte Fragen
Ist die Lektion „Media Queries und Mobile-First-Entwicklung“ kostenlos?
Ja — der vollständige Text von „Media Queries und Mobile-First-Entwicklung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Media Queries und Mobile-First-Entwicklung“?
Schreiben Sie Breakpoints mit min-width-Media-Queries, erstellen Sie zuerst das mobile Layout und erweitern Sie es schrittweise für größere Bildschirme. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Media Queries und Mobile-First-Entwicklung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das viewport-Meta-Tag
- Flexbox für Layouts
- CSS Grid für Layouts
- Media Queries und Mobile-First-Entwicklung