This example expresses that a certain style sheet (example.css) applies to devices of a certain media type (‘screen’) with certain feature (it must be a color screen).
Here the same media query written in an @import-rule in CSS:
@import url(color.css) screen and (color);
@media only screen and (max-device-width: 480px) {
}
To target small devices we can use the following syntax:
Add alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules.
Linking a separate stylesheet using media queries
Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.
ADDING THE NEW STYLESHEET Adding a separate stylesheet using media queries to load this stylesheet after the current stylesheet and only if the max-width is less than 480 pixels.
-----------------------------
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
I.e. these are identical:
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
As are these:
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }
-------------------
Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.
Here is an example of several media queries in a comma-separated list using the an @media-rule in CSS:
@media screen and (color), projection and (color) { … }
