WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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
print 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.