Media feature of CSS helps us render a piece of information (specifically speaking “layout”) differently according to the media types. This is one of the important features of CSS.
It is very crucial at this point of time when each day you are introduced to a new media type. So, it is a good idea to specify different layouts for different media like mobile phone, tablet, and print media.
The layout for all the media types cannot be the same. So, the design depends on the device (or medium)
There are two ways of doing this. One is to use @media and the other @import.
This chapter focuses on the widely used @media rule.
The same style sheet can have the style information for all the different types of devices.
@media target_medium{
/* style rules for target medium */
}
The target medium may be only one medium or different types of media separated by commas. Like this −
@media target_medium1,target_medium2{
/* style rules for target medium */
}
Using @media increases the responsiveness of the design across different sizes of viewport from small to large or anywhere in between
| Media Type | Description |
|---|---|
| all | Suits all devices |
| braille | Used on Braille tactile feedback devices |
| This type is intended for printed material and for documents that are previewed in print mode | |
| Embossed | This type is for paged Braille printers |
| speech | used for speech synthesizers. It is also called “aural” in CSS2 |
| handheld | Intended for small handheld devices. Small Viewport. |
| Projection | used for presentations on projectors like styling for slides |
| screen | Used for color screens |