Retina Display Media queries

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

}

/* Retina enabled devices with smaller screen */
@media only screen and (-webkit-min-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) {

}

/*Non- retina based devices with medium screen size */
@media only screen and (min-width: 768px) {

}

/* Retina devices with medium screen size */
@media only screen and (-webkit-min-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) {

}

/* Non-retina devices with large screen sizes */
@media only screen and (min-width: 1200px) {

}

/* Retina devices with large screen sizes */
@media only screen and (-webkit-min-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) {

}

Posted

in

by

Tags:

Comments

Leave a Reply