Was sind Media Queries (Media Query)?
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
Kommentar zu dieser Seite
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.
Schulung + Beratung
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
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.
vielen Dank, Jonas :-)