Media queries are used to conditionally apply CSS styles with the CSS
matches property, and
change event. Media queries are used as values of the
<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
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
only, which in the case of
not, alters the meaning of the following media query.