Skip to content

Instantly share code, notes, and snippets.

@fredDesign
Forked from onestepcreative/check_media_query.js
Created November 19, 2015 17:09
Show Gist options
  • Save fredDesign/8151eec9383864fadfa4 to your computer and use it in GitHub Desktop.
Save fredDesign/8151eec9383864fadfa4 to your computer and use it in GitHub Desktop.
Fast way to check media queries in javascript (based on Foundation 5 sizing)
// Each statement returns true or false based on current viewport
// The EM units are based on html, body { font-size: 100%; } CSS
window.MQ = {
// max-width 640px mobile-only styles
small : (matchMedia('only screen and (max-width: 40em)').matches),
// min-width 641px and max-width 1024px screen only
medium : (matchMedia('only screen and (min-width:40.063em) and (max-width:64em)').matches),
// min-width 641px screen only
mediumUp : (matchMedia('only screen and (min-width:40.063em)').matches),
// max-width 1024px screen only
mediumDown : (matchMedia('only screen and (max-width:64em)').matches),
// min-width 1025px and max-width 1441px screen only
large : (matchMedia('only screen and (min-width:64.063em) and (max-width:90em)').matches),
// min-width 1025px screen only
largeUp : (matchMedia('only screen and (min-width:64.063em)').matches),
// max-width 1441px screen only
largeDown : (matchMedia('only screen and (max-width:90em)').matches),
// min-width 1025px and max-width 1440px screen only
xlarge : (matchMedia('only screen and (min-width:90.063em) and (max-width:119.063em)').matches),
// min-width 1025px screen only
xlargeUp : (matchMedia('only screen and (min-width:90.063em)').matches),
// max-width 1440px screen only
xlargeDown : (matchMedia('only screen and (max-width:119.063em)').matches),
// min-width 1440px screen only
xxlarge : (matchMedia('only screen and (min-width:120.063em)').matches),
// returns true for touch devices
touch : ('ontouchstart' in window),
// detect portrait orientation
portrait : (matchMedia('only screen and (orientation: portrait)')),
// detect portrait orientation
landscape : (matchMedia('only screen and (orientation: landscape)')),
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment