Responsive Web Pages Using CSS and Their Advantages

Web applications are the most popular way to create an application without knowing about there Operating system but, there is a problem with that, we have to manage the application's view on different screen size (ex. mobile, tablet, desktop).
By using CSS @media  queries for responsive web page we can use the same page for mobile to the desktop by using different CSS styles on them according to there screen size. 
The most popular frameworks bootstrap and many other popular CSS frameworks use it and its reliable and best way to deal with the situation.

Advantages of using @media

Media queries can be used to check many things, like:

1. width and height of the viewport
2. width and height of the device
3. orientations (is the phone /tablet in landscape or portrait modes)
4. resolution(eg: 840x1024)

Browser support

These are the list of browsers that specifies the first browser version that will fully support the @media rule.

1. Chrome 21
2. IE 9
3. Firefox 3.5
4. Safari 4.0
5. Opera 9

How to use

Syntax:

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

/* On screens that are 992px wide or less, go 4 four columns to 2 columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less than it, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

This is how we can achieve responsive web pages using media query and it's easy to use.

 We can also specify the style which we want to load using media query while linking the style on the basis of the screen.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">