CSS3 Media Queries
CSS2 Introduced Media Types
The @media rule, presented in CSS2, made it conceivable to characterize diverse style rules for various media types.
Examples: You could have one lot of style rules for PC screens, one for printers, one for handheld gadgets, one for TV type gadgets, thus on.
Unfortunately these media types never got a ton of help by gadgets, other than the print media type.
CSS3 Introduces Media Queries
Media inquiries in CSS3 expand the CSS2 media types thought: Instead of searching for a sort of gadget, they take a gander at the capacity of the device.
Media questions can be utilized to check numerous things, such as:
- width and tallness of the viewport
- width and tallness of the device
- orientation (is the tablet/telephone in scene or representation mode?)
- resolution
Using media inquiries are a prevalent procedure for conveying a custom fitted style sheet to tablets, iPhone, and Androids.
Browser Support
The numbers in the table determines the main program form that completely bolsters the @media rule.
| Property | ||||||
|---|---|---|---|---|---|---|
| @media | 21.0 | 12.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media Query Syntax
A media inquiry comprises of a media type and can contain at least one articulations, which resolve to either obvious or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
The consequence of the question is genuine if the predetermined media type coordinates the sort of gadget the archive is being shown on and all articulations in the media inquiry are valid. At the point when a media inquiry is valid, the relating template or style rules are connected, after the typical falling rules.
Unless you utilize the not or just administrators, the media type is discretionary and the
all type will be implied.
You can likewise have diverse templates for various media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3 Media Types
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for PC screens, tablets, advanced cells etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Media Queries Simple Examples
One approach to utilize media inquiries is to have an other CSS area directly inside your style sheet.
The following precedent changes the foundation shading to lightgreen if the viewport is 480 pixels wide or more extensive (if the viewport is not exactly 480 pixels, the foundation shading will be pink):
Example
@media screen and (min-width: 480px) {
body {
foundation shading: lightgreen;
}
}
Try it yourself »
The following precedent demonstrates a menu that will buoy to one side of the page if the viewport is 480 pixels wide or more extensive (if the viewport is not exactly 480 pixels, the menu will be over the content):
Example
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; drift: left;}
#main
{margin-left:216px;}
}
Try it yourself »
CSS3 @media Reference
For a full outline of the considerable number of media types and highlights/articulations, if it's not too much trouble take a gander at the @media rule in our CSS reference.
