Media Query Syntax

Media query syntax follows this syntax:

The not keyword (which is optional) negates the query, effectively saying “If the following is not true, apply these styles.” The not keyword negates, the entire query, so:

evaluates as:

and not as:

The only keyword forces just those browsers that support CSS3 media queries to evaluate the query. In essence, it conceals the CSS from older browsers:

The type refers to the media type, such as print, handheld, screen, or, in this case, all.

The logical and allows us to create complex queries and such:

This will apply the enclosed CSS to screen viewports where the width is at least 600px and no wider than 1200px;  The logical and is used to add constraints to a query; you can combine as many as you like.

Finally, the expression is the media features we’re testing against. Again, most often you’ll use a few of these.

A little known fact is that CSS3 media queries also allow a logical OR. A comma can be used for this purpose:

This says, “apply the CSS on screen if either the pixel density is at least 300dpi OR if there are two device pizels for every CSS pixel.” For the record, this is not a real world example as of yet; these features are not yet well supported.

Media queries can be used within CSS files:

They can also be applied via the media attribute of the link element:

Lastly, they can be imported with @import:


Leave a Reply

Your email address will not be published. Required fields are marked *