﻿<?xml version="1.0" encoding="utf-8"?>

<snippet name="Retina Display Media Queries" description="Retina Display Media Queries" preview="code" type="block">

<insertText location="beforeSelection">

<![CDATA[@media only screen and (min-width: 320px) {



  /* For non-retina based devices that have a smaller screen */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),

only screen and (                min-resolution: 192dpi) and (min-width: 320px),

only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 



  /* Retina enabled devices with smaller screen */



}



@media only screen and (min-width: 768px) {



  /*Non- retina based devices with medium screen size */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px),

only screen and (                min-resolution: 192dpi) and (min-width: 768px),

only screen and (                min-resolution: 2dppx)  and (min-width: 768px) { 



  /* Retina devices with medium screen size */



}



@media only screen and (min-width: 1200px) {



  /* Non-retina devices with large screen sizes */



}



@media

only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1200px),

only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1200px),

only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1200px),

only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1200px),

only screen and (                min-resolution: 192dpi) and (min-width: 1200px),

only screen and (                min-resolution: 2dppx)  and (min-width: 1200px) { 



  /* Retina devices with large screen sizes */



}]]>

</insertText>

<insertText location="afterSelection"><![CDATA[]]>

</insertText>

</snippet>

