Width-based media queries for web projects.

media-queries.css

/* 
 * SMALL SCREENS 
 */
@media only screen {
  /* Define mobile styles */
}

// Mobile-only styles, max-width: 640px
@media only screen and (max-width: 640px) {
  /* use when QAing mobile only issues */
}

/* 
 * MEDIUM SCREENS 
 */
@media only screen and (min-width: 641px) {
  
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  /* use when QAing tablet only issues */
}

/* 
 * LARGE SCREENS 
 */
@media only screen and (min-width: 1025px) {
  
}

@media only screen and (min-width:1025px) and (max-width: 1440px) {
  /* use when QAing large screen only issues */
}

/* 
 * EXTRA LARGE SCREENS 
 */
@media only screen and (min-width: 1441px) {

}

@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  /* use when QAing extra large screen only issues */
}

/* 
 * EXTRA EXTRA LARGE SCREENS 
 */
@media only screen and (min-width: 1921px) {
  /* used for styles. Also used for testing extra extra large screen only issues */
}