-
-
Save CaseyLeask/8930432 to your computer and use it in GitHub Desktop.
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
<!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" data-mq-var-name="screen-width" content="small" media="(max-width: 480px)"> | |
<meta name="breakpoint" data-mq-var-name="screen-width" content="medium" media="(min-width: 481px) and (768px)"> | |
<meta name="breakpoint" data-mq-var-name="screen-width" 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 --> | |
<img src=“small.jpg” data-mq-attr-template=“[screen-width].jpg” data-mq-attr=“src”> | |
</body> | |
</html> |
The user (may) want to target the variables at multiple attributes… ? So perhaps it could be a comma-seperated list? Not sure.
Makes sense.
Updated the gist and changed the variable name device-width
to screen-width
.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'd love to move this into the README (or ideally into the non-existant site!)