Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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 & 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

    Antworten
    • Jonas Hellwig (Autor)
      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.

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

      vielen Dank, Jonas :-)

      Antworten

Schreibe einen Kommentar zu Michael Köllner Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

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 →