Skip to content

Instantly share code, notes, and snippets.

@replete

replete/getLayoutBreakpoint.js

Last active December 21, 2015 16:28
Show Gist options
  • Save replete/6333653 to your computer and use it in GitHub Desktop.
Save replete/6333653 to your computer and use it in GitHub Desktop.
Download ZIP
Conditional CSS Breakpoints: CSS screen-width Media Queries 'synced' with Javascript. Stores breakpoint name via CSS font-family on <head>. IE7+
Raw
getLayoutBreakpoint.js
/*
LayoutBreakpoints - Sync JS with your CSS media queries - yay!
After painfully discovering that there is no hope for IE7 (and others) to read
content properties with generated content, I resolved to this solution.
If it doesn't work for you, you could easily change getElementsByTagName to
getElementsById and pop an ID attribute onto an element of your choosing.
See an example here: http://replete.github.io/FitTextNow/example.html (view-source)
-@replete
*/
var getLayoutBreakpoint = function () {
var el = document.getElementsByTagName("head")[0],
bp = window.getComputedStyle ? getComputedStyle(el,'').getPropertyValue('font-family') : el.currentStyle.fontFamily;
return bp.replace(/"|'|`/g, "")
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment