By using the @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
The @media rule allows different style rules for different media in the same style sheet.
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 20 pixels font, and in a red color:
Media Type | Description |
---|---|
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 |
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 |