<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Awesome stuff you got here. Just one side note to the typo, that had me going crazy until I noticed it:
instead of