Erklärung

Bei einem Media Query handelt es sich um ein CSS-Technik, mit der innerhalb eines Stylesheets gerätespezifische Eigenschaften abgefragt werden können. Zu diesen Eigenschaften gehören beispielsweise die Größe des Viewports, die Abmessungen des Bildschirms, die Auflösung des Displays oder die Ausrichtung eines mobilen Endgeräts (Hoch- oder Querformat). Media Queries sind elementarer Bestandteil des sog. „Responsive Webdesign„; mit ihrer Hilfe wird eine Website u.a. für verschiedene Bildschirmgrößen und Display-Typen (z.B. Retina-Displays) optimiert.

Media Queries sind eine Weiterentwicklung des Medientyps in CSS2. Mit Medientypen können allerdings nur Geräte ansich (z.B. Drucker oder Bildschirme etc.) angesprochen werden, nicht aber die Eigenschaften des Geräts.

Beispiel eines Media Queries

@media only screen and (max-width: 480px) { 
  /* Hier werden die Eigenschaften definiert */ 
}

Diskussion zu dieser Frage

  1. Michael Köllner
    schrieb am 11.12.2019 um 08:08 Uhr:

    Hallo Jonas,
    sollte ich ein Media Queries auch in rem definieren? Du hast es im obigen Beispiel in Pixel definiert. Danke und viele Grüße, Michael

    • Jonas Hellwig
      schrieb am 11.12.2019 um 17:55 Uhr:

      Wir schreiben die MQs in em oder rem. Das Beispiel ist in Pixeln geschrieben damit es leichter verständlich ist. Allerdings können die meisten Browser auch Pixelwerte problemlos umrechnen. Nur sehr alte Browser haben Probleme mit Pixeln wenn gezoomt wird.

    • Michael Köllner
      schrieb am 12.12.2019 um 08:28 Uhr:

      vielen Dank, Jonas :-)

Ihr Kommentar zu dieser Frage

Bei Fragen, Anregungen oder Kritik zu dieser Frage, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: