Responsive Design with CSS3 Media Queries

Now a days mobiles, tabs and laptops are having many types of screen sizes. If you decide to handle that many resolutions you have to write that many style sheets.

That's why professionals recommend to write media queries inside single style sheet. Like this


@media only screen and (min-width : 320px) and (max-width : 480px) {
/* mobile Styles */
}


@media only screen and (min-width : 481px) and (max-width : 800px) {
/*Tab Styles */
}


@media only screen and (min-width : 801px) and (max-width : 1024px) {
/*Desktops Styles */
}

Check it out this link for responsive web designing:

http://waybloggy.blogspot.com/2014/09/components-required-for-responsive-web.html[^]

Media Queries[^]

You could follow up with the above link for media queries, but as above Soumya mentioned, bootstrap today is the mostly used tool as it has inbuilt classes for making your site responsive. Just download and include the bootstrap-responsive.min.js and use its classes.
Hope this helps
Thanks
:)