Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Conditional CSS Breakpoints: CSS screen-width Media Queries 'synced' with Javascript. Stores breakpoint name via CSS font-family on <head>. IE7+
/*
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
You can’t perform that action at this time.