Last active
March 27, 2020 07:41
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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