Web.QHMIT.com

CSS @media At-Rule

The CSS @media at-rule is used in media queries. It allows you to apply styles based on the media type or media features.

Using the @media at-rule allows you to apply different styles depending on the user agent or device that the document is being displayed in.

For example, you can specify that certain styles are only for printed documents, or for small screens, or large screens, or for screen readers, etc.

Here's an example:

The above styles are only applied when the document is printed (or if the user views it via the "Print Preview" function).

So you could use the following code to set the color to green when the document is being displayed on the screen, and black when its printed:

Media Types

The above examples use media types to determine which style is applied. Below is a list of media types supported in CSS Media Queries Level 4.

all
Matches all devices.
print
Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in "Print Preview".
screen
Matches all devices that aren't matched by print or speech.
speech
Matches screenreaders and other devices that read out the content of a page.

CSS2 supported seven other media types (full list here), however, these are being deprecated in CSS Media Queries Level 4. Also, it is expected that all media types will eventually be deprecated in favor of media features.

In the meantime, media types can be combined with media features in order to provide more granularity in your media queries.

Media Features

In addition to media types, you can use media features in your media queries. Media features provide more granularity in your media queries, by allowing you to test for a single, specific feature of the user agent or display device.

For example, you can apply styles to only those screens that are greater (or smaller) than a certain width. Like this:

And you can add to that by doing stuff like this:

What that example does is, sets the .container class to a different width, depending on the width of the user's screen. Any screens less than 576px wide will not be affected by this code (although the same method could be used to cater for screens smaller than this).

You could replace min-width with max-width if you wanted to test it by maximum width instead of minimum.

Media Conditions

You can create media conditions by combining media features together using the not, and, and or logical operators.

Here's an example of using the and operator to test the screen's width and height.

You can also combine media features with media types.

In the following example we test the resolution of a printer (the resolution can be tested with any valid <resolution> data type):

Official Specifications