CSS Media Queries are a fantastic little feature that allows for some serious functionality and sexiness to your website based on the size of the browser. Before you go on a binge implementing such features to your site and spending countless hours designing to a scaled browser window don’t forget the one thing that makes all this magic possible; the viewport meta tag. This meta tag has several properties that can be set and here is a great resource which outlines the usage of them all. So if your CSS media query is not working or rendering correctly on the device and working ok in a browser, make sure this tag is on your page then check if the problem gets resolved. In addition, CCS Tricks has a great article on media queries for standard devices that show some of the default sizing options for various objects such as smart phones, iPads, etc.

As a quick note here are the options I use for my site:

Tags: