Media Queries zusammenfassen und in einer Zeile schreiben
Von: Jonas Mehrere CSS Media Queries können zusammengefasst in einer Zeile geschrieben werden. Das schafft mehr Übersicht und verkürzt den Code.
CSS Media Queries zur Definition von Breakpoints sind die entscheidende Technologie im Zusammenhang mit responsive Design. Bei komplexen Projekten stellt sich allerdings oft die Frage wie und wo im Stylesheet die Breakpoints notiert werden. Präprozessoren wie Sass bieten zahlreiche Möglichkeiten um Media Queries komfortabel zu organisieren. Doch auch CSS selbst biete die Möglichkeit mehrere Bereiche über einen Befehl anzusprechen.
Mehrere CSS Breakpoints in einer @media-Regel kombinieren
Das folgende Code-Snippet zeigt, wie ihr mehrere Breakpoints in einer @media-Regel zusammenfassen könnt.
/* Wir färben den <body> rot zwischen 500 und 600 Pixeln, sowie ab 800 Pixeln bis unendlich */
@media
screen and (min-width: 500px) and (max-width:600px),
screen and (min-width: 800px) {
body {
background: red;
}
}
