CSS media query

• To build our media queries we'll be using the images that we have previously created. These include a Retina and normal version of a background image, an image sprite, and a border image with a photo to wrap it around.
• 1.  To get started, create a new HTML document called mediaQueries.html inside the /retina/folder. Then inside of the basic HTML structure we'll add the non-Retina CSS code for a background image, an image sprite, and a border.
• 2.  First, we'll add a boxstyle to hold our background image and the non-Retina version of the background image code.

<style>
.box {
height: 200px;
width: 700px;
}
.background {
background: url(images/myBackground.jpg) repeat;
}

• 3.  Then we'll add the CSS code for our non-Retina image sprite.

.icon {
background: url(images/mysprite.png);
height: 40px;
width: 40px;
}

• 4.  Next we'll add the code for a non-Retina border image.

.imageBorder {
border-width: 10px; 
-webkit-border-image: url(images/myBorder.png) 10 repeat;
border-image: url(images/myBorder.png) 10 repeat;
}

• 5.  Now we're ready to add a media query that will replace these images if the user is on a Retina Display.

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.background {
background: url(images/myBackground@2x.jpg) repeat; 
background-size: 250px 150px;
}
.icon {
background: url(images/mysprite@2x.png); 
background-size: 80px 80px;
}
.imageBorder {
-webkit-border-image: url(images/myBorder@2x.png) 20 repeat;
border-image: url(images/myBorder@2x.png) 20 repeat;
}
} /* END OF MEDIA QUERY */

• To complete the CSS, we'll add the styles to position our icons and the closing style tag.

.icon1 {background-position: 0 0;}
.icon2 {background-position: -40px 0;}
.icon3 {background-position: 0 -40px;}
.icon4 {background-position: -40px -40px;}
</style>

• 6.  To finish our code we'll just need to add some HTML to display our three types of images.

<div class="box background"></div>
<ul>
<li class="icon icon1"></li>
<li class="iconRetina icon2"></li>
<li class="icon icon3"></li>
<li class="iconRetina icon4"></li>
</ul>
<img class="imageBorder" src="images/myImage.jpg" />

• First, @mediabegins the media query statement. Then only screenspecifies that the device being used must be a screen (another media type could be print). Next, we specify that the min-device-pixel-ratiomust be equal to or greater than two. This targets the Retina Display (or any other similar display) because it has a pixel density that is two times greater than a standard display (some other devices use a ratio of 1.5). We also included the -webkitvendor prefix to make sure that our code works on older Safari browsers. To keep our code short we only included one vendor prefix, but if you want full support you may need other prefixes (-o, -ms, -moz). You can find out more about browser support at http://caniuse.com/. Finally, the brackets will enclose any style that we would like applied if these conditions are met