How to target mobile devices with CSS Media Queries

gistfile1.css

@media only screen and (-webkit-device-pixel-ratio: .75) {
  /* CSS for Low-density screens goes here *
   * Ex: HTC Evo, HTC Incredible, Nexus One */
}

@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {
  /* CSS for Medium-density screens goes here *
   * Ex: Samsung Ace, Kindle Fire, Macbook Pro *
   * max-device-width added so you don't target laptops and desktops */
}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {
  /* CSS for High-density screens goes here *
   * Ex: Samsung Galaxy SII, HTC Nexus One, HTC Evo 3D */
}

@media only screen and (-webkit-device-pixel-ratio: 2) {
  /* CSS for Ultra-high-density (Retina) screens goes here *
   * Ex: Samsung Galaxy SIII, HTC Evo LTE, iPhone 4 */
}