Media queries have an optional mediatype parameter. This parameter is placed directly after the @media declaration (@media mediatype), for example:
General Structure of a Media Query
The above CSS code will give the DOM HTML element a white background color when being printed
The mediatype parameter has an optional not or only prefix that will apply the styles to everything except the specified mediatype or only the specified media type, respectively. For example, the following code example will apply the style to every media type except print.
The above media query specifies two conditions:1. The page must be viewed on a normal screen (not a printed page, projector, etc). 2. The width of the user's view port must be at least 720 pixels. If these conditions are met, the styles inside the media query will be active, and the background color of the page will be sky blue. Media queries are applied dynamically. If on page load the conditions specified in the media query are met, the CSS will be applied, but will be immediately disabled should the conditions cease to be met. Conversely, if the conditions are initially not met, the CSS will not be applied until the specified conditions are met. In our example, if the user's view port width is initially greater than 720 pixels, but the user shrinks the browser's width, the background color will cease to be sky blue as soon as the user has resized the view port to less than 720 pixels in width.
And the same way, for just showing it only on the screen, this can be used:
The list of mediatype can be understood better with the following table:
|all||Apply to all devices|
|Printers in general. Used to style print-versions of websites|
|handheld||PDA's, cellphones and hand-held devices with a small screen|
|projection||For projected presentation, for example projectors|
|braille||Braille tactile devices|
|embossed||Paged braille printers|
|tty||Devices with a fixed-pitch character grid. Terminals, portables.|