12 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Media query - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Media_query | reference | web, html, css, javascript, documentation | 2026-05-05T05:37:37.675107+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
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.
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.