Media query

Amedia queryis a logical expression that is a method for CSS, JavaScript, HTML, and other web languages, to check aspects of the user agent or device that the document is being displayed in, independent of the document contents, to determine whether the associated code block or feature should be applied.

Media queries are used to conditionally apply CSS styles with the CSS@mediaand@importat-rules and in JavaScript to test and monitor media states such as with thematchMedia()method,matchesproperty, andchangeevent. Media queries are used as values of the<link>,<source>,and<style>HTMLelementmediaattributes, conditionally applying the link, source, or style if the media query is true. When amediaattribute is omitted, it defaults totrue.Media queries are also used as the value of thesizesattribute of the<img>element.

Media queries are made up of optional media query modifiers and media types, and zero or more media conditions, along with logical operators.

Media queries are re-evaluated in response to changes in the user environment, such as when a user expands a browser window or flips a mobile device onto its side changing from portrait to landscape orientation.

Multiple comma-separated media queries create amedia query list.A media query list is true if any of its component media queries are true, and false only if all of its component media queries are false.

A media query may optionally be prefixed by a single media query modifier ornotoronly,which in the case ofnot,alters the meaning of the following media query.