jlittlejohn
2/21/2013 - 5:59 PM

SCSS: Media-Queries Template

SCSS: Media-Queries Template

/*********************************************
 MEDIA QUERIES
 *********************************************/

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
  body {

  }
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
  body {
  
  }
}

/* 7" TABLETS */
// Kindle Fire: 600px x 1024px;
// Nexus 7: 800px x 1280px;

/* 10" TABLET PORTRAIT */
@media only screen and (min-width: 768px), screen and (min-width: 768px) and (orientation: portrait) { 
  body {
    
  }
}

/* 10" TABLET LANDSCAPE */
@media only screen and (min-width: 980px), screen and (min-width: 980px) and (orientation: portrait) { 
  body {

  }
}

/* DESKTOP */
@media only screen and (min-width: 1280px) { 
  body {

  }
}

/* WIDESCREEN */
@media only screen and (min-width: 1400px) { 
  body {

  }
}

/* RETINA DISPLAY */
@media only screen and (-webkit-min-device-pixel-ratio: 2)  {
  body {

  }
}