Note: This isn’t a fully comprehensive guide to responsive design or media queries, nor does it fully explain them. It’s more for practical examples of how to use media queries to get a responsive design.
Using CSS Media queries to create a responsive design is actually a lot simpler than you might think. Before anything, you need to set your viewport to be the same dimensions as the browser window:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
This needs to be added along with the other meta tags if you don’t have it already (in the <head> section, in case you don’t have any other meta tags.) In my experience, this isn’t needed too much for desktop browsers, but rather for mobile device browsers.