Media Queries Summary

Seit CSS3 können ganze Stylesheets oder einzelne Regeln abhängig z.B. vom Gerätetyp oder der Bildschirmgrösse aktiviert bzw. deaktiviert werden. Dies wird mit Media Queries umgesetzt, welche inzwischen das A & O von responsivem Webdesign darstellen.

Beispiele

Eine Media Query wird mit dem @media-Attribut und den dazugehörenden Regeln definiert:

/* Abhängig von der Bildschirmgrösse */
@media screen and (min-width: 768px) { ... }

/* Abhängig vom Bildformat */
@media screen and (orientation: landscape) { ... }

/* Abhängig von der Ausgabesoftware */
@media print { ... }

Um Ressourcen zu sparen, können die media-Regeln direkt in den <link> tag geschrieben werden. Dadurch werden für unterschiedliche Ausgabegeräte eigene Stylesheets geladen.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Ausser im Internet Explorer gibt es zusätzlich die Möglichkeit, Media Queries zu verschachteln:

@media only screen and (max-width: 750px) {
  p {
    font-weight: bold;
  }
  @media (min-height: 500px) {
    p {
      background: yellow;
    }
  }
}

Demos

• Demo 1 – Mobile first breakpoints
• Demo 2 – Print
• Demo 3 – Device orientation & query nesting
• Demo 4 – Multiple conditions (OR)
• Demo 5 – NOT Keyword & Version 4 Features
• Demo 6 – Responsive website example

---

Quellen

• https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• https://caniuse.com/?search=media%20queries
• https://www.bram.us/2021/01/11/nested-media-queries/
• https://www.w3.org/TR/mediaqueries-5/
• https://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/