Media query

A media query is 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 @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.