Media Types

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

The @media at-rule is defined in Media Queries (W3C Recommendation 19 June 2012).