Media Query

Ein Media Query ist ein logischer Ausdruck, der eine Methode für CSS, JavaScript, HTML und andere Websprachen darstellt, um Aspekte des User-Agents oder Geräts, auf dem das Dokument angezeigt wird, unabhängig vom Dokumentinhalt zu überprüfen, um festzustellen, ob der zugehörige Codeblock oder das Feature angewendet werden soll.

Media Queries werden verwendet, um CSS-Stile bedingt mit den CSS-At-Rules @media und @import anzuwenden und in JavaScript, um Medienzustände zu testen und zu überwachen, zum Beispiel mit der matchMedia()-Methode, der matches-Eigenschaft und dem change-Event. Media Queries werden als Werte der media-Attribute der <link>, <source> und <style> HTML-Elemente verwendet, wodurch der Link, die Quelle oder der Stil nur dann bedingt angewendet werden, wenn der Media Query wahr ist. Wenn ein media-Attribut weggelassen wird, ist es standardmäßig true. Media Queries werden auch als Wert des sizes-Attributs des <img>-Elements verwendet.

Media Queries bestehen aus optionalen Media Query-Modifizierern und Medientypen sowie null oder mehr Medienbedingungen zusammen mit logischen Operatoren.

Media Queries werden neu evaluiert, wenn sich die Benutzerumgebung ändert, zum Beispiel, wenn ein Benutzer ein Browserfenster vergrößert oder ein mobiles Gerät zur Seite kippt und von Hochformat zu Querformat wechselt.

Mehrere komma-getrennte Media Queries bilden eine Media Query-Liste. Eine Media Query-Liste ist wahr, wenn eine ihrer Komponenten-Media Queries wahr ist und nur dann falsch, wenn alle ihrer Komponenten-Media Queries falsch sind.

Ein Media Query kann optional durch einen einzelnen Media Query-Modifizierer oder not oder only vorangestellt werden, wobei not die Bedeutung des folgenden Media Queries verändert.