Media Queries zusammenfassen und in einer Zeile schreiben
Von Jonas Ihr könnt mehrere CSS Media Queries zusammenfassen und in einer Zeile schreiben. Wir zeigen in diesem Beitrag was ihr beachten müsst.
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;
}
}
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
