mediaqueries.css

/* Smartphones (portrait and landscape) */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {
    
}

/* Smartphones (landscape) */
@media only screen 
  and (min-width: 321px) {
    
}

/* Smartphones (portrait) */
@media only screen 
  and (max-width: 320px) {
    
}

/* iPads (portrait and landscape) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
    
}

/* iPads (landscape) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
    
}

/* iPads (portrait) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
    
}

/* Desktops and laptops */
@media only screen 
  and (min-width: 1224px) {
    
}

/* Large screens */
@media only screen 
  and (min-width: 1824px) {
    
}

/* iPhone 4 + iPhone 5 */
@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (device-height: 640px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (device-width: 640px) {
    
}

 /* Small screen, retina */
@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) { 
    
}

/* Medium screen, retina */
@media
  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
  only screen and (                min-resolution: 192dpi) and (min-width: 700px),
  only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 
    
}

/* Large screen, retina */
@media
  only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
  only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
  only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
  only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
  only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
  only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 
    
}