Media Queries zusammenfassen und in einer Zeile schreiben
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.
Workshops und Seminare von kulturbanause
Visual Prototyping, Web Animationen, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
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;
}
}
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
