kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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;
 }

}
Anzeige des obigen Codes in den Chrome Dev-Tools

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.