CSS3 Media Query
What is Media Query?
CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen).
- The media query technique first used in CSS3.
- It became a W3C recommendation in June 2012.
- It is an extension of media dependent stylesheets used in different media types (i.e. screen and print) found in CSS2.
- The most commonly used media feature is "width".
- It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Recommended Media features for Media queries:
Following is a list of media features recommended for media queries by W3C.
| Feature |
Value |
Min/Max |
Description |
| color |
integer |
yes |
It specifies the number of bits per color component. |
| color-index |
integer |
yes |
It specifies the number of entries in the color lookup table. |
| device-aspect-ratio |
integer/integer |
yes |
It specifies the aspect ratio of the device. |
| device-height |
length |
yes |
It specifies the height of the output device. |
| device-width |
length |
yes |
It specifies the width of the output device. |
| grid |
integer |
no |
It is true for a grid-based device. |
| height |
length |
yes |
It specifies the height of the rendering surface. |
| monochrome |
integer |
yes |
It specifies the number of bits per pixel in a monochrome frame buffer. |
| resolution |
resolution ("dpi" or "dpcm") |
yes |
It specifies the resolution of the display screen. |
| scan |
"progressive" or "interlaced" |
no |
It specifies scanning process of "tv" media types. |
| width |
length |
yes |
It specifies the width of the rendering surface. |
What is Responsive Web Design?
The term Responsive Web Design was given by Ethan Marcotte. It facilitates you to use fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts i.e. Desktop, Smartphone, Tablet etc.
What screen resolutions do you use while taking screenshots?
Smartphone: 320px
Tablet: 768px
Netbook: 1024px
Desktop: 1600px
Let's take an example to see the simple use of media query:
This example specifies that if you resize your window less than 500px, the background color will be changed.
See this example:
