Media Queries (‚Medienabfragen‘) sind eine Funktion im CSS. Sie sind für die responsive Webentwicklung essenziell und ohne sie können Unternehmen ihr Onlinemarketing und E-Commerce nicht konsequent nutzen.
Media Queries werden vor allem für die responsive Webentwicklung genutzt. Mit solchen Medienabfragen wird das Weblayout einer Website beim Erreichen der Breakpoints im CSS an die diversen Viewports und Monitor-Klassen angepasst. Dafür werden zwei bis drei Breaks gesetzt. Wenn diese erreicht werden, springt das Weblayout der Site um. Media Queries legen die Darstellung von Dokumenten fest, d. h., sie ermöglichen das Rendern von Inhalten, indem sie die Bildschirmauflösung und Größe an die mobilen Endgeräte und den Desktop anpassen. Auf einem Desktopgerät wird bspw. ein querformatiges Bild besser dargestellt und auf Mobilgeräten ein quadratisches oder hochformatiges. Es wird das jeweils passende Bild ausgeliefert, das in den Media Queries angelegt wurde, und auch die Auflösung passgenau ausgespielt. Genauso ist die Verfahrensweise mit responsiven Logos.
Media Queries bestehen aus der Abfrage des Datentyps und weiterer Merkmale. Wenn eine Abfrage als wahr eingestuft wird, kann das Stylesheet oder die Stilregel gemäß der Kaskadierung genutzt werden. Media Queries werden überall dort genutzt, wo Stylesheets eingebunden oder CSS-Regeln festgelegt sind.