Media Types

Media types allow different layouts for different devices, such as screen, print, projection, tv, to be specified.

 

The @media keyword is followed by the media type keyword that you want the rules to apply to.

 

The following CSS will render <p> elements with a font-size of 16px and a font-weight of bold for the screen, or 10px and bold if printed

 

@media screen {

p { font-size:16px; }

}

@media print {

p { font-size:10px; }

}

@media screen, print {

p { font-weight:bold; }

}

 

 

 Type Description 
all All media types
aural Speech & sound synthesizers
braille Braille tactile feedback devices
embossed Paged braille printers
handheld Small screen handheld devices
print Printers
projection Projected presentations, slides
screen Computer screens
tty Fixed pitch character grid; teletypes, terminals
tv Televisions

Leave a Reply