CSS @media At-Rule
@media at-rule is used in media queries. It allows you to apply styles based on the media type or media features.
@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:
- Matches all devices.
- Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in "Print Preview".
- Matches all devices that aren't matched by
- 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.
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
max-width if you wanted to test it by maximum width instead of minimum.
You can create media conditions by combining media features together using the
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):
@mediaat-rule is defined in Media Queries (W3C Recommendation 19 June 2012).
- It is also being defined in Media Queries Level 4 (W3C Working Draft)
@mediarule was also defined in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation 07 June 2011), and in Cascading Style Sheets, level 2 (W3C Recommendation 12-May-1998).