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 */ 
}

Feedback und Ergänzungen – 3 Kommentare

  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 :-)

Kommentar zu dieser Seite

Ihr habt Anregungen, Ergänzungen, einen Fehler gefunden oder dieser Inhalt ist nicht mehr aktuell? Dann freuen wir uns über einen Kommentar. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

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: