Skip to content

Instantly share code, notes, and snippets.

@njm2112
Created June 30, 2018 17:44
Show Gist options
  • Save njm2112/713ba4978d12f6e5274fff94d3553117 to your computer and use it in GitHub Desktop.
Save njm2112/713ba4978d12f6e5274fff94d3553117 to your computer and use it in GitHub Desktop.
Common Media Queries
/* 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) {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment