Media Queries ermöglichen es dir, CSS-Regeln abhängig von bestimmten Geräte- oder Viewport-Eigenschaften (z. B. Breite, Höhe, Auflösung) anzuwenden. Auch HTML und JS unterstützen Media-Queries. Im Folgenden wird die Einrichtung im CSS beschrieben.
1. Grundsyntax
@media (Bedingung) {
/* CSS-Regeln */
}
Beispiele:
/* Nur für Bildschirme (keine Drucker etc.) */
@media screen {
body {
font-family: "Inter", sans-serif;
}
}
/* Für Geräte mit max. Breite 600px */
@media screen and (max-width: 600px) {
body {
background-color: lightgray;
}
}
/* Kombination mehrerer Bedingungen */
@media (min-width: 768px) and (max-width: 1024px) {
.container {
padding: 2rem;
}
/* gleiche Wirkung, kürzer */. (nicht in älteren Browsern unterstützt !!!)
}
@media (768px <= width <= 1024px) {
.container {
padding: 2rem;
}
2. Typische Breakpoints (nach Geräten)
| Gerätetyp | Breite (ca.) | Beispiel-Media Query |
|---|---|---|
| 📞 Smartphone (klein) | bis 480 px | @media (max-width: 480px) |
| 📱 Smartphone (groß) | bis 600 px | @media (max-width: 600px) |
| 📱 Tablet (hochkant) | ab 600 px | @media (min-width: 600px) |
| 💻 Tablet (quer) | ab 768 px | @media (min-width: 768px) |
| 💻 Laptop | ab 1024 px | @media (min-width: 1024px) |
| 🖥️ Desktop (groß) | ab 1280 px | @media (min-width: 1280px) |
| 🖥️ Widescreen / 4K | ab 1600–1920 px | @media (min-width: 1600px) |
💡 Praxis-Tipp:
Viele moderne Frameworks (z. B. Tailwind CSS, Bootstrap) orientieren sich an diesen Breakpoints:
/* Tailwind CSS Standard */
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
3. Weitere nützliche Media Features
| Feature | Beispiel | Bedeutung |
|---|---|---|
orientation | (orientation: portrait) | Hochformat |
orientation | (orientation: landscape) | Querformat |
prefers-color-scheme | (prefers-color-scheme: dark) | Dark Mode aktiv |
hover | (hover: hover) | Zeigegerät (z. B. Maus) vorhanden |
pointer | (pointer: coarse) | Grober Zeiger (z. B. Touchscreen) |
resolution | (min-resolution: 2dppx) | Retina / HiDPI-Displays |
aspect-ratio | (min-aspect-ratio: 16/9) | Seitenverhältnis |
and, or, not | @media screen and (min-width: 600px) not (orientation: landscape) | logische Operatoren; Bedingungen kombinieren |
screen, print, tv | @media tv and (min-width: 1920px) | unterschiedliche Gerätetypen |
4. Best Practices
✅ Mobile First —> Zuerst Styles für kleine Geräte schreiben, dann mit min-width schrittweise erweitern.
✅ Breakpoints nur nutzen, wenn nötig —> nicht für jedes Gerät, sondern wenn das Layout wirklich „bricht“.
✅ Vermeide starre Pixelwerte —> arbeite lieber mit flexiblen Einheiten (em, %, vw).
/* Basis für Mobile */
.container { padding: 1rem; }
/* Ab Tablet */
@media (min-width: 768px) {
.container { padding: 2rem; }
}
/* Ab Desktop */
@media (min-width: 1280px) {
.container { padding: 3rem; }
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}
/* Bewegungen vermeiden (z. B. Barrierefreiheit) */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}5.Links
CSS-Tricks: https://css-tricks.com/a-complete-guide-to-css-media-queries/
CSS-Tricks: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
CSS-Tricks: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/
CSS-Tricks: https://css-tricks.com/css-container-queries/
CSS-Tricks: https://css-tricks.com/centering-css-complete-guide/