Learn CSS3 to style your web pages

Know what is CSS, its uses and how to add? CSS Style for Text, Paragraphs, Tables, Links and Forms. Background image with CSS, Borders styles in CSS, Set margin and positions in CSS, etc.

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: