Css media query css media queries

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

CSS3 Media Types

Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that «reads» the page out loud

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

More Media Query Examples

For much more examples on media queries, go to the next page: CSS MQ Examples.

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник

CSS media queries

CSS media queries are a key component of responsive design that allow you to apply CSS styles depending on the presence or value of device characteristics.

It’s common to apply a media query based on the 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.

In CSS, use the @media 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 @import .

When designing reusable HTML components, you may also use 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, media queries can be applied to various elements:

• In the element’s media attribute, they define the media to which a linked resource (typically CSS) should be applied.
• In the element’s media attribute, they define the media to which that source should be applied. (This is only valid inside elements.)
• In the element’s media attribute, they define the media to which the style should be applied.

Media queries in JavaScript

In JavaScript, you can use the Window.matchMedia() method to test the window against a media query. You can also use 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.

Reference

At-rules

Guides

Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.

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).

Learn how Media Queries can help users understand your website better.

Specifications

See also

Found a content problem with this page?

This page was last modified on Jun 15, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник