Media queries are used to conditionally apply CSS styles with the CSS @media and @import at-rules and in JavaScript to test and monitor media states such as with the matchMedia() method, matches property, and change event. Media queries are used as values of the <link > , <source > , and <style > HTML element media attributes, conditionally applying the link, source, or style if the media query is true. When a media attribute is omitted, it defaults to true . Media queries are also used as the value of the sizes attribute 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 a media 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 or not or only , which in the case of not , alters the meaning of the following media query.