Media query

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

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

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

Media Queries werden in Reaktion auf Änderungen in der Benutzerumgebung neu ausgewertet, beispielsweise wenn ein Benutzer ein Browserfenster erweitert oder ein mobiles Gerät von Hochformat auf Querformat dreht.

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

Eine Media Query kann optional durch einen einzelnen Media Query Modifier oder not oder only vorangestellt werden, wodurch im Fall von not die Bedeutung der folgenden Media Query geändert wird.