From 9e966e72c5206b642e7eb7360bafb8b3c9e62ef0 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 16 Jan 2024 16:10:34 -0800 Subject: [PATCH 01/10] New module --- .../en-us/web/css/css_media_queries/index.md | 81 ++++++++++++------- 1 file changed, 52 insertions(+), 29 deletions(-) diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md index 16e02e8198e37f5..0ec0272270970e8 100644 --- a/files/en-us/web/css/css_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -2,41 +2,19 @@ title: CSS media queries slug: Web/CSS/CSS_media_queries page-type: css-module -spec-urls: - - https://drafts.csswg.org/mediaqueries/ - - https://drafts.csswg.org/css-conditional/ +spec-urls: https://drafts.csswg.org/mediaqueries/ --- {{CSSRef}} -**CSS media queries** are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) that allow you to apply CSS styles depending on the presence or value of device characteristics. +**CSS media queries** module enables testing and querying viewport values or user-agent features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS `@media` rule and in other contexts and languages, such as HTML and JavaScript. -It's common to apply a media query based on the {{Glossary("viewport")}} size so that layout choices can be made for devices with different screen sizes. -For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens. +Media queries are a key component of [responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). They enable applying CSS styles depending on the presence or value of device characteristics. It's common to apply a media query based on the {{Glossary("viewport")}} size so that layout choices can be made for devices with different screen sizes. For example, you may increase the font sizes when printing a page, the padding between paragraphs when a page is viewed in portrait mode, or the size of buttons on touchscreens. -![A laptop and a mobile device with different viewport sizes that can be queried using media queries where we can see the content being laid out differently.](media-queries.svg) - -In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. -To conditionally apply an entire style sheet, use {{cssxref("@import")}}. +In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use {{cssxref("@import")}}. When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics. -### Media queries in HTML - -In [HTML](/en-US/docs/Web/HTML), media queries can be applied to various elements: - -- In the {{HTMLElement("link")}} element's [`media`](/en-US/docs/Web/HTML/Element/link#media) attribute, they define the media to which a linked resource (typically CSS) should be applied. -- In the {{HTMLElement("source")}} element's [`media`](/en-US/docs/Web/HTML/Element/source#media) attribute, they define the media to which that source should be applied. (This is only valid inside {{HTMLElement("picture")}} elements.) -- In the {{HTMLElement("style")}} element's [`media`](/en-US/docs/Web/HTML/Element/style#media) attribute, they define the media to which the style should be applied. - -### Media queries in JavaScript - -In [JavaScript](/en-US/docs/Web/JavaScript), you can use the {{domxref("Window.matchMedia()")}} method to test the window against a media query. -You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of a query changes. -With this functionality, your site or app can respond to changes in the device configuration, orientation, or state. - -You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries). - ## Reference ### At-rules @@ -44,17 +22,59 @@ You can learn more about programmatically using media queries in [Testing media - {{cssxref("@import")}} - {{cssxref("@media")}} +### Data types + +- [``](/en-US/docs/Web/CSS/@media#media_types) +- [``](/en-US/docs/Web/CSS/@media#media_features) + +### Glossary terms + +- [media](/en-US/docs/Glossary/Media/CSS) + ## Guides - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - - : Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. -- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) + + - : Introduces media queries, their syntax, and the operators and media features used to construct media query expressions. + +- [Beginner's guide to media queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries) + + - : define this + +- [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) + - : Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser). + - [Using media queries for accessibility](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility) - - : Learn how Media Queries can help users understand your website better. + + - : Learn how media queries can help users understand your website better. + - [Printing](/en-US/docs/Web/CSS/CSS_media_queries/Printing) + - : Tips and techniques for helping improve web content printer output. +- [Learn: responsive design](/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) + + - : define this + +## Related concepts + +- `media` attribute of the [``](/en-US/docs/Web/HTML/Element/link#media), [``](/en-US/docs/Web/HTML/Element/source#media), and [`