CSS @media Rule
CSS @media Rule
The @media rule is applied in media queries to apply different styles for different media types and devices. It is used to check many things like:-
- width and height of the device
- width and height of the viewport
- resolution
- orientation
By this, we can customize style sheets for responsive web design for desktops, laptops, tablets, and mobile phones. We can also use it for printed documents purposes.
Syntax:-
Its syntax is:-
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
List of Media Types are:-
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, etc. |
speech | Used for screenreaders that reads the page out loud |