Skip to content

Instantly share code, notes, and snippets.

@onestepcreative
Last active March 27, 2020 07:41
Show Gist options
  • Save onestepcreative/8680832 to your computer and use it in GitHub Desktop.
Save onestepcreative/8680832 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