Media Queries

Mobile

@media (max-width: 480px) {
  // CSS that only applies to viewports 
  // less than or equal to 480 pixles goes here
}

Not Mobile

@media (min-width: 481px) {
  // CSS that only applies to viewports 
  // greater than 480 pixles goes here
}

Small Tablet

@media (max-width: 767px) {
  // CSS that only applies to viewports 
  // less than 768 pixles goes here
}

iPad

@media (min-width: 768px) and (max-width:1024px) {
  // CSS that only applies to viewports 
  // of similar size to the ipad goes here
}

Desktop

@media (min-width: 1025px) {
  // CSS that only applies to viewports 
  // greater than 1024 pixles goes here
}

iPad Retina

@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  // CSS that only applies to viewports 
  // of similar size to the ipad and 
  // with double pixel density goes here
}