Media Queries Tutorial - Responsive Website

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This will take control of the layout on mobile browsers. Place this inside the tag and you’re ready to go.

-------------------------------------------------------------------------------------------------------------------------------

Working < 960 Viewport

This is our first media query that will target screens less than 960px.
/* VIEWPORT < 960px */
@media only screen and (max-width: 960px){
#container{ width: 768px; }
}
Since our layout is now less than 960px, we will style all the main container elements by changing the width to 768px.

-------------------------------------------------------------------------------------------------------------------------------

Working < 768 Viewport

The above CSS is our second media query that will target screens less than 768px (Tablet Portrait).
/* VIEWPORT < 768px */
@media only screen and (max-width: 768px){
#container{ width: 524px; }
}

-------------------------------------------------------------------------------------------------------------------------------

Working < 524 Viewport

This is our third media query that will target screens less than 524px (Mobile).
@media only screen and (max-width: 524px){
#container{ width: 300px; }
}

-------------------------------------------------------------------------------------------------------------------------------

That's it...

For more detailed info: http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/