How do we use them?
First we need to set the viewport to device-width:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then we can either link to external stylesheets:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" />
<!--<![endif]-->
Or we can add them to an existing stylesheet:
/* target the minimum width of the browser window */
@media screen and (min-width: 900px) { .class { background: #FFE11A; }}
/* target the maximum width of the browser window */
@media screen and (max-width: 600px) { }
/* target minimum and maximum width of the browser window */
@media screen and (min-width: 600px) and (max-width: 900px) { }
/* target the maximum width of the device */
@media only screen and (max-device-width: 480px) { }
/* target the maximum width of the device and it's orientation */
@media only screen and (max-device-width: 480px) and (orientation:portrait) { }
@media only screen and (max-device-width: 480px) and (orientation:landscape) { }
/* target the iPhone4 retina display */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }
Is it supported?
The browser support for media queries is actually pretty good. The latest versions of Firefox, Safari, Chrome, and Opera are all using it. Internet Explorer 9 will be, but IE8 and below do not. However there is a jQuery media queries plugin – for those not-so-capable browsers.
Final Thoughts
One thing to keep in mind – Although we can now tailor our designs to suit different devices we’ll still be dealing with the exact same content. (CSS3 flexbox can help rearrange some content if necessary) So even if we decide to use CSS to hide images on the iPhone, they’ll still be downloaded by the user.