From Wiki
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of re-sizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

In simple words we want to develop website that suites all devices. You might have seen few domains have their mobile site different from main site like m.google.com. In such cases you will have to maintain both of the them (more maintenance means more cost). If you have one site that behaves well for all devices (desktop,ipad,iphone etc…) . dont you think that will be great ??? This is what Responsive Design is?

Lets start with an example.

1) Responsive Design
You can just re-size your browser window (to mobile size) to see how it works for the current site (i.e. https://www.bibek.in). Or you can check the same in with Mobil devices.
You will notice that the menus are converted to drop downs and study other segments behaviors.

2) Non-Responsive Design
Open this url ( https://bibek.in/eh/view/) in resized browser window or in Mobil devices. You will see the difference.

As of now you might have understood the significance of responsive design. So lets start working with RWD.

No doubt RWD a big thing now. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. Lets learn about the basic logic of responsive design and media queries.

Media Queries : CSS2 allows you to specify style-sheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different style-sheets. For example, you can have one style-sheet for large displays and a different style-sheet specifically for mobile devices.

Example :
The following CSS will apply if the viewing area is smaller or equal to 320px.

@media screen and (max-width: 320px) {
  .newsHighlight {
    background: #eee;
  }
}

You can google to understand more into media quires.

Stay tuned for updates on this article.