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
Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …
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!
Das könnte dich auch interessieren
-
CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw. -
Interaction Type Media Queries – Unterstützung für Hover-Effekte und Bedienkonzept abfragen -
Websites für das iPhone X optimieren: weiße Balken entfernen, Viewport anpassen, Safe Area festlegen