-
-
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> |
I'd love to move this into the README (or ideally into the non-existant site!)
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
For the sake of the example, I think calling the variable
device-width
and having the viewport meta tag present withdevice-width
could lead to confusing people.