Media queries and responsive design

Media queries is a CSS3 module and is a W3C candidate recommendation since June 2012. Media queries add the possibility of applying a style sheet to CSS only when a media query evaluates as true. A media query evaluates the device's type and device's features. The device's types are screen, speech, and print, among others, and the features are width, device-width, and resolution, among others.

Nowadays, the screen type and device's width play an important role in responsive web design. With the use of media queries, someone can restrict CSS rules to a specified screen width and thus change the representation of a website with varying screen resolutions.

A typical media query will look like the following line of code:

@media  { ... }

For instance, the following media query sets the font color to black when the viewport's width is larger than 767 pixels:

@media screen and (min-width: 768px) {
  color:black;
  //add other style rules here
}

In the preceding code...