CSS Media

Media Type
Used for all media type devices
Used for speech and sound synthesizers
Used for braille tactile feedback devices
Used for paged braille printers
Used for small or handheld devices
Used for printers
Used for projected presentations, like slides
Used for computer screens
Used for media using a fixed-pitch character grid, like teletypes and terminals
Used for television-type devices

<link href="style.css" media="screen" rel="stylesheet">

CSS Media Queries

una media query consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media



<link href="style.css" media="screen" rel="stylesheet">
<link href="desktop.css" media="screen and (min-device-width: 768px)" rel="stylesheet">

Media Queries

Media queries is a CSS3 extension to media types that allows us far greater control over rendering across different devices than do media types alone. Used in conjunction with a media type, a media query is a logical expression, evaluating to true or false, that tests one or more features of the output device to which the CSS is to be applied.

Media queries can be used in <link> tags, XML processing instructions, the @import at-rule, and the @media at-rule. The CSS associated with the media query expression is only applied if the expression evaluates to true.
A logical expression can consist of either a media feature, or a media feature followed by a colon (:) and a value—similar to a normal property/value pair. A logical expression in a media query must be enclosed in parentheses (…). Let’s look at a some examples:

<link rel="stylesheet" type="text/css" href="/style.css" media="all and (color)">
<?xml-stylesheet media="all and (color)" rel="stylesheet" href="example.css" ?>

@import url(/style.css) all and (color);
@media all and (color) {  ⋮ one or more rule sets…}

In the above examples, we can see media queries used in the media attribute of a <link> tag and an XML processing instruction, and with the optional media type list in @import and @media at-rules. In all three examples, the media query uses the expression all and (color) to indicate that the CSS should be applied to all output media that are capable of representing color.

Here’s another example that applies to hand-held devices, but only if the viewport width is at least 20em:

@media handheld and (min-width:20em) { ⋮ one or more rule sets…}

You can use multiple expressions in a media query if you join them with the and keyword. The following example applies the CSS if the output device is a screen-based device with a width between 800 and 1280 pixels:

@import url(/style.css) screen and (min-width:800px) and (max-width:1280px);
You can also use multiple, comma-separated media queries in a single at-rule:

@import url(/style.css) screen and (color), projection and (color);

The comma acts like an “or” keyword, so the above example will apply the CSS to color-screen or projection devices.
As you’ve seen in these examples, many of the media features can be prefixed with min- or max- to express boundary constraints. These prefixes should be thought of as “greater than or equal to” and “less than or equal to,” respectively. The W3C chose to use these prefixes instead of a syntax involving < and > characters, due to the special meaning those characters have in HTML and XML.
Media features generally apply only for certain media types. It’s meaningless to query color capabilities for "speech" media, or to specify a width in pixels for "tty" media—these kinds of logical expressions will always evaluate to false.

Table 1. Media Features||~ Feature
number of bits per color component
number of entries in the color lookup table
aspect ratio
height of the output device
width of the output device
true for a grid-based device
height of the rendering surface
number of bits per pixel in a monochrome frame buffer
resolution ("dpi" or "dpcm")
"progressive" or "interlaced"
scanning process of "tv" media types
width of the rendering surface

altro esempio


Come scrivere le media queries

To add a media query to the media attribute, you set one or more conditions using the media features in Table 1. You specify the value for a media feature after a colon in the same way as for a CSS property. Each condition is wrapped in parentheses and added to the media declaration using the keyword and . For example:
media="screen and (min-width: 401px) and (max-width: 600px)"
Media queries are Boolean: they will either be true or false. If the entire statement is true, the style sheet is applied. If false, it will be ignored. So when using the above query, all parts must be true for the style sheet to be applied. In other words, it will apply only to screens between 401 and 600 pixels wide.
Some media features, such as color , monochrome , and grid , can be used as conditions without specifying a value. For example, the following targets all color visual displays:
media="screen and (color)"
Specifying alternativesThere is no or keyword to specify alternative media features. Instead, you list alternatives as a comma-separated list like this:
media="screen and (min-width: 769px), print and (min-width: 6in)"
This applies styles to screens wider than 769 pixels or print devices using paper at least 6 inches wide.
Specifying negative conditionsTo specify a negative condition, you can precede the media declaration with the keyword not like this:
media="not screen and (monochrome)"
You can't use not in front of an individual condition. The keyword must come at the beginning of the declaration, and it negates the whole declaration. So, the preceding example applies to all devices except monochrome screens.
Hiding media queries from older browsersThe media queries specification also provides the keyword only , which is intended to hide media queries from older browsers. Like not , the keyword must come at the beginning of the declaration. For example:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Browsers that don't recognize media queries expect a comma-separated list of media types, and the specification says they should truncate each value immediately before the first nonalphanumeric character that isn't a hyphen. So, an old browser should interpret the preceding example as this:
Because there is no such media type as only , the style sheet is ignored. Similarly, an old browser should interpret the following as media="screen" :
media="screen and (min-width: 401px) and (max-width: 600px)"
In other words, it should apply the style rules to all screen devices, even though it doesn't know what the media queries mean. Unfortunately, IE 6–8 failed to implement the specification correctly. Instead of applying the styles to all screen devices, it ignores the style sheet altogether.
In spite of this behavior, it's still recommended to prefix media queries with only if you want to hide the styles from other, less common browsers.
Dealing with older versions of Internet ExplorerThe lack of support for media queries in IE 6 through IE 8 is not a problem. Simply create a basic set of styles that are served to all browsers without using media queries, and use the media queries to provide an enhanced experience for visitors using more advanced browsers.
Alternatively, use an Internet Explorer conditional comment to serve a special set of rules to older versions of IE like this:
<!--[if lt IE 9 & !IEMobile]> <link href="iestyles.css" rel="stylesheet" type="text/css"> <![endif]-->
Using media queries with @import and @media
In addition to using media queries in <link> tags when attaching an external style sheet, you can use them with @import and @media . The basic syntax is the same. For example, the following imports a style sheet and applies the styles to devices with a screen that's no wider than 400 pixels:
@import url("phone.css") only screen and (max-width:400px);
Media queries can also be used within a style sheet like this:
@media only screen and (max-width:400px) { #navbar { float: none; width: 400px; } }
Testing media queries
Testing your code is important. Testing for tablets and smartphones complicates testing since ideally you would have an array of devices at your disposal. Luckily, you can test most queries without possessing the actual device. It's always better to have the real thing in front of you, but for the purposes of this article, using a simple browser will help you understand how queries work.
The ZIP file that accompanies this article contains a sample file (mediaqueries.html) with three different designs attached. Use the sample file to go through the following resize test. With the browser window fully open, you can see the basic site design (see Figure 1). Make the browser window narrower and notice the changes as you pass the dimensions for various devices. As you pass the dimensions specified in the code, the style should change to the tablet (Figure 2) or phone size (Figure 3). The header image becomes smaller for tablets, for example, and the pods below take on a different flow. For phone style, the main center image disappears, replaced by a menu of larger vertical buttons.
The browser checks media queries every time the window changes, when you resize it, for instance, or when you flip the phone from portrait to landscape orientation.