Common Media Queries

common-media-queries.css

/* This is a small sampling of the various approaches to media queries. The 
   point is: they're all over the board. Part of the "issue" (if you can call
   it that) may be due to the intended audience of each site/framework. Another
   may be that it's really difficult to test for a lot of different devices.
   Regardless, it would be really nice if there was standard baseline that 
   could be used as a starting point for maximum compatibility and coverage. */

/* ==========================================================================
   Frameworks
   ========================================================================== */

/* [Bootstrap](http://twitter.github.com/bootstrap/)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (min-width: 1200px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {}
@media (max-width: 480px) {}
@media (max-width: 979px) {}
@media (min-width: 980px) {}

/* [320 and Up](http://stuffandnonsense.co.uk/projects/320andup/)
   ========================================================================== */

@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1382px) {}
@media 
  only screen and (-webkit-min-device-pixel-ratio: 1.5), 
  only screen and (min--moz-device-pixel-ratio: 1.5), 
  only screen and (min-device-pixel-ratio: 1.5) {}

/* [Golden Grid System](http://goldengridsystem.com/)
   ========================================================================== */

@media screen and (min-width: 40em) {}   /* 640px */
@media screen and (min-width: 45em) {}   /* 720px */
@media screen and (min-width: 55.5em) {} /* 888px */
@media screen and (min-width: 61.5em) {} /* 984px */
@media screen and (min-width: 75em) {}   /* 1200px */
@media screen and (min-width: 87em) {}   /* 1392px */
@media screen and (min-width: 105em) {}  /* 1680px */
@media screen and (min-width: 117em) {}  /* 1872px */
@media screen and (min-width: 130em) {}  /* 2080px */

/* [Fluid Baseline Grid](http://fluidbaselinegrid.com/)
   ========================================================================== */

@media only screen and (min-width: 320px) {}
@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 1280px) {}
@media only screen and (min-width: 1400px) {}


/* ==========================================================================
   Websites
   ========================================================================== */

/* [Boston Globe](http://www.bostonglobe.com/)
   ========================================================================== */

/* globe-main.css */
@media (max-device-width: 480px) {}
@media screen and (min-width: 480px), print {}
@media screen and (min-width: 480px) and (max-width: 639px), print {}
@media screen and (min-width: 481px) and (max-width: 799px), print {}
@media screen and (min-width: 788px) and (max-width: 1050px), print {}
@media screen and (max-width:639px) {}
@media screen and (min-width: 640px) and (max-width: 809px), print {}
@media screen and (min-width: 600px), print {}
@media screen and (min-width: 640px), print {}
@media screen and (min-width: 810px), print {}
@media screen and (min-width: 810px) {}
@media screen and (min-width: 810px) and (max-width: 930px) {}
@media screen and (min-width: 931px) {}
@media screen and (min-width: 900px) {}
@media screen and (min-width: 1100px) {}
@media screen and (min-width: 1200px) {}
@media screen and (min-width: 1400px){}
@media print {}

/* [Hicksdesign](http://hicksdesign.co.uk/)
   ========================================================================== */

@media handheld and (max-width: 480px), 
  screen and (max-device-width: 480px), 
  screen and (max-width: 600px)  {}
@media screen and (min-width: 920px) {}
@media screen and (min-width: 1350px) {}
@media screen and (min-width: 1500px) {}
@media only screen and (max-device-width: 480px) {}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
	
/* [Simon Collison](http://colly.com/)
   ========================================================================== */

@media (min-device-width:1024px) and (max-width:989px),
  screen and (max-device-width:480px),
  (max-device-width:480px) and (orientation:landscape),
  (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {}
@media (min-device-width:1024px) and (max-width:509px),
  (max-device-width:480px) and (orientation:portrait) {}

/* [Ethan Marcotte](http://ethanmarcotte.com/)
   ========================================================================== */

@media screen and (max-device-width: 480px),
  screen and (max-width: 600px) {}
@media screen and (min-width: 600px) {}
@media screen and (min-width: 860px) {}
@media screen and (min-width: 1200px) {}

/* [Homeland Security](http://www.hsgac.senate.gov/)
   ========================================================================== */

@media only screen and (max-width: 1265px) {}
@media only screen and (max-width: 960px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}
@media only screen and (min-width: 961px) {}
@media only screen and (min-width: 1200px) {}

/* [(New) Myspace](http://new.myspace.com/)
   ========================================================================== */

@media all and (max-width: 950px) {}
@media all and (max-width: 800px) {}
@media all and (max-width: 700px) {}
@media all and  (max-width: 480px) {}
@media all and (max-width: 350px) {}

@media all and (max-height: 650px) {}
@media all and (max-height: 500px) {}
@media all and (min-height: 650px) {}
@media all and (min-height: 600px) {}
@media all and (min-width: 900px) {}

@media all and (min-width: 1000px) and (min-height: 550px) {}
@media all and (min-width: 1000px) and (min-height: 700px) {}
@media all and (min-height: 900px) {}
@media all and (max-height: 480px) and (orientation: portrait) {}
@media all and (max-height: 480px) and (orientation: landscape) {}

/* [dConstruct](http://2012.dconstruct.org/)
   ========================================================================== */

@media only screen and (min-width : 45em) and (max-width : 55em) {}
@media only screen and (min-width : 50em) and (max-width : 55em) {}
@media only screen and (min-width: 55em) {}
@media only screen and (min-width: 65em) {}
@media only screen and (min-width: 70em) {}
@media only screen and (min-width: 72em) {}
@media only screen and (min-width: 85em) {}
@media only screen and (min-width: 95em) {}