{"id":555,"slug":"media-queries","name":"Media Queries","short_description":"Media Queries can target browsers by certain characteristics, features, and user prefs, apply styles, or run other related code.","url":"https://github.com/topics/media-queries","github_count":2363,"created_by":"Håkon Wium Lie, W3C","logo_url":null,"released":"June 19, 2012","wikipedia_url":"https://en.wikipedia.org/wiki/Media_queries","related_topics":["responsive-design","container-queries","client-hints","css-breakpoints","css-viewport"],"aliases":["media-query"],"github_url":null,"content":"\u003cp\u003e\u003cstrong\u003eMedia Queries\u003c/strong\u003e are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003econditionally apply styles with the CSS \u003ccode class=\"language-plaintext highlighter-rouge\"\u003e@media\u003c/code\u003e and \u003ccode class=\"language-plaintext highlighter-rouge\"\u003e@import\u003c/code\u003e at-rules\u003c/li\u003e\n  \u003cli\u003etarget specific media for the \u003ccode class=\"language-plaintext highlighter-rouge\"\u003e\u0026lt;style\u0026gt;\u003c/code\u003e, \u003ccode class=\"language-plaintext highlighter-rouge\"\u003e\u0026lt;link\u0026gt;\u003c/code\u003e, \u003ccode class=\"language-plaintext highlighter-rouge\"\u003e\u0026lt;source\u0026gt;\u003c/code\u003e, and other HTML elements with the \u003ccode class=\"language-plaintext highlighter-rouge\"\u003emedia=\u003c/code\u003e attribute\u003c/li\u003e\n  \u003cli\u003etest and monitor media states using the \u003ccode class=\"language-plaintext highlighter-rouge\"\u003eWindow.matchMedia()\u003c/code\u003e and \u003ccode class=\"language-plaintext highlighter-rouge\"\u003eEventTarget.addEventListener()\u003c/code\u003e methods\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003eMedia types define the broad category of device for which the media query applies. The type is optional except when using the not or only logical operators.\n    \u003cul\u003e\n      \u003cli\u003e\u003cstrong\u003eall:\u003c/strong\u003e Suitable for all devices.\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eprint:\u003c/strong\u003e Intended for paged material and documents viewed on a screen in print preview mode.\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003escreen:\u003c/strong\u003e Intended primarily for screens.\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eMedia features describe a specific characteristic of the user agent, output device, or environment. Media Queries Level 4 groups 18 media features into 5 categories.\n    \u003cul\u003e\n      \u003cli\u003e\u003cstrong\u003eViewport/Page Characteristics\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eDisplay Quality\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eColor\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eInteraction\u003c/strong\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cstrong\u003eVideo-prefixed:\u003c/strong\u003e The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. \u003cem\u003e(upcoming Media Queries Level 5)\u003c/em\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eLogical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.\u003c/li\u003e\n\u003c/ul\u003e\n","created_at":"2024-07-29T13:48:31.837Z","updated_at":"2026-07-29T00:15:23.420Z","topic_url":"https://awesome.ecosyste.ms/api/v1/topics/media-queries","html_url":"https://awesome.ecosyste.ms/topics/media-queries","projects_url":"https://awesome.ecosyste.ms/api/v1/projects?keyword=media-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/lists?topic=media-queries"}