Wednesday, February 13, 2013

@media in CSS

With media types a page can have one layout for screen, one for print, one for handheld devices, etc.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

@media screen
p.test {font-family:verdana,sans-serif;font-size:14px;}
@media print
p.test {font-family:times,serif;font-size:10px;}
@media screen,print
p.test {font-weight:bold;}
Other Media Types
all  - Used for all media type devices
aural - Used for speech and sound synthesizers
braille - Used for braille tactile feedback devices
embossed - Used for paged braille printers
handheld - Used for small or handheld devices
print - Used for printers
projection - Used for projected presentations, like slides
screen - Used for computer screens
tty - Used for media using a fixed-pitch character grid, like teletypes and terminals
tv - Used for television-type devices

No comments:
Write comments
Recommended Posts × +