Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html lang="en" class="breakpoint-medium">
<head>
<meta charset="utf-8">
<title>Metaquery Boilerplate</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="breakpoint" content="small" media="(max-width: 480px)">
<meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">
<meta name="breakpoint" content="large" media="(min-width: 769px)">
<!--[if gt IE 9]><!--><script type="text/javascript" charset="utf-8">
!function(a,b){var c={breakpoints:{},_namedEvents:{},_eventMatchCache:{},_globalEvents:[],onBreakpointChange:function(){var a=Array.prototype.slice.call(arguments),b=a.pop(),d=a.pop();"undefined"==typeof d?c._globalEvents.push(b):(c._namedEvents[d]=[]).push(b),k()}},d=function(c){/in/.test(b.readyState)?a.setTimeout(function(){d(c)},9):c()},e=function(a,c,d){b.addEventListener?a.addEventListener(c,d):a.attachEvent("on"+c,d)},f=function(a,b){return-1!==a.className.split(" ").indexOf(b)},g=function(a,b){var c=a.className.split(" "),d=c.indexOf(b);f(a,b)&&(c.splice(d,1),a.className=c.join(" "))},h=function(a,b){f(a,b)||(a.className=""!==a.className?a.className+" "+b:b)},i=function(a,c){var d="breakpoint-"+c,e=b.documentElement;a?h(e,d):g(e,d)},j=function(a,c){if(a)for(var d=b.getElementsByTagName("img"),e=0;e<d.length;e++){var f=d[e],g=f.getAttribute("data-mq-src");g&&(f.src=g.replace("[breakpoint]",c))}},k=function(){for(var b in c.breakpoints){var d=c.breakpoints[b],e=a.matchMedia(d).matches;if(c._namedEvents[b]&&c._eventMatchCache[b]!==e)for(var f=0;f<c._namedEvents[b].length;f++){var g=c._namedEvents[b][f];c._eventMatchCache[b]=e,"function"==typeof g&&g(e)}if(e)for(var h=0;h<c._globalEvents.length;h++){var k=c._globalEvents[h];"function"==typeof k&&k()}i(e,b),j(e,b)}},l=function(){for(var a=b.getElementsByTagName("meta"),d=0;d<a.length;d++)if("breakpoint"===a[d].name){var e=a[d].getAttribute("content"),f=a[d].getAttribute("media");c.breakpoints[e]=f}},m=function(){l(),k()},n=function(){l(),e(a,"resize",k),k()};a.metaQuery=c,m(),d(n)}(this,this.document);
</script><!--<![endif]-->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- AMAZING WEB EXPERIENCE GOES HERE -->
</body>
</html>
@ricnunes

This comment has been minimized.

Copy link

ricnunes commented Apr 11, 2014

Awesome stuff you got here. Just one side note to the typo, that had me going crazy until I noticed it:

 <meta name="breakpoint" content="medium" media="(min-width: 481px) and (max-width: 768px)">

instead of

 <meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">
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.