@media rule
Allows to define different style rules for different media.
With Media Types you can specify how documents will be presented in different media. The contents of documents and elements
can be displayed differently on printed material, on the screen, etc.
In Javascript, the cssRules collection contains the CSS rules of a stylesheet, and the CSSMediaRule object represents a @media rule.
The cssRules collection is not supported in Internet Explorer before version 9 and there is no way to access to a @media rule in those browsers.
Syntax:
@media typeList {
rules
}
rules
}
| typeList | - | A comma-separated list of media types. |
| rules | - | Style rules. |
Media types:
| all | Default. All devices. |
| aural | Speech synthesizers. |
| braille | Braille tactile feedback devices. |
| embossed | Paged braille printers. |
| handheld | Handheld devices. |
| Printed pages and print preview. | |
| projection | Projectors or transparent prints. |
| screen | Color computer screens. |
| speech | Intended for speech synthesizers. |
| tty | Teletypes. |
| tv | Television-type devices. |
Examples:
|
|
||||
<html> <head> <style> @media screen { span.test { font-family:verdana; font-size:14px; } } @media print, aural { span.test { font-family:serif; font-size:10px } } </style> </head> <body> <span>test content</span> </body> </html> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments