Permalink
Browse files

Merge branch 'em-support' of https://github.com/NetEffect/Respond int…

…o NetEffect-em-support

Conflicts:
	respond.min.js
  • Loading branch information...
2 parents 30fe962 + f56d351 commit bff28c1157d097731cb95975c24dd06f8ab388c6 scottjehl committed Jan 16, 2012
Showing with 84 additions and 25 deletions.
  1. +51 −11 respond.src.js
  2. +31 −12 test/test.css
  3. +2 −2 test/test.html
View
@@ -46,6 +46,10 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
//define vars
var doc = win.document,
docElem = doc.documentElement,
+ refNode = docElem.firstElementChild || docElem.firstChild,
+ // fakeBody required for <FF4 when executed in <head>
+ fakeUsed = !doc.body,
+ fakeBody = doc.body || doc.createElement( "body" ),
mediastyles = [],
rules = [],
appendedEls = [],
@@ -87,7 +91,6 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
}
}
makeRequests();
-
},
//recurse through request queue, get css text
@@ -145,15 +148,14 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
eachq = fullq.split( "," );
eql = eachq.length;
-
for( ; j < eql; j++ ){
thisq = eachq[ j ];
mediastyles.push( {
media : thisq.match( /(only\s+)?([a-zA-Z]+)(\sand)?/ ) && RegExp.$2,
rules : rules.length - 1,
- minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/ ) && parseFloat( RegExp.$1 ),
- maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/ ) && parseFloat( RegExp.$1 )
+ minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
+ maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
} );
}
}
@@ -172,8 +174,36 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
styleBlocks = {},
lastLink = links[ links.length-1 ],
- now = (new Date()).getTime();
-
+ now = (new Date()).getTime(),
+ eminpx = (function() {
+ var ret;
+ /* -- old method
+ if(docElem.currentStyle) {
+ ret = docElem.currentStyle.fontSize;
+ } else {
+ ret = document.defaultView.getComputedStyle( docElem, null ).getPropertyValue( "font-size" )
+ }
+ */
+ var div = doc.createElement('div');
+ div.id = "mq-test-1";
+ div.style.cssText = "position:absolute;top:-99em;width:1em";
+ fakeBody.appendChild( div );
+
+ if( fakeUsed ){
+ docElem.insertBefore( fakeBody, refNode );
+ }
+
+ ret = div.offsetWidth;
+
+ if( fakeUsed ){
+ docElem.removeChild( fakeBody );
+ }
+
+ fakeBody.removeChild( div );
+
+ return parseFloat(ret);
+ })();
+
//throttle resize calls
if( fromResize && lastCall && now - lastCall < resizeThrottle ){
clearTimeout( resizeDefer );
@@ -185,10 +215,20 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
}
for( var i in mediastyles ){
- var thisstyle = mediastyles[ i ];
- if( !thisstyle.minw && !thisstyle.maxw ||
- ( !thisstyle.minw || thisstyle.minw && currWidth >= thisstyle.minw ) &&
- (!thisstyle.maxw || thisstyle.maxw && currWidth <= thisstyle.maxw ) ){
+ var thisstyle = mediastyles[ i ],
+ min = thisstyle.minw,
+ max = thisstyle.maxw;
+
+ if( !!min ){
+ min = parseFloat( min ) * ( /em/i.test( min ) ? eminpx : 1 );
+ }
+ if( !!max ){
+ max = parseFloat( max ) * ( /em/i.test( max ) ? eminpx : 1 );
+ }
+
+ if(!min && !max ||
+ ( !min || min && currWidth >= min ) &&
+ ( !max || max && currWidth <= max )){
if( !styleBlocks[ thisstyle.media ] ){
styleBlocks[ thisstyle.media ] = [];
}
@@ -274,4 +314,4 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
else if( win.attachEvent ){
win.attachEvent( "onresize", callMedia );
}
-})(this);
+})(this);
View
@@ -12,8 +12,8 @@ body {
}
p {
width: 60%;
- min-width: 300px;
- max-width: 700px;
+ min-width: 18.75em; /* 300px @ 16px */
+ max-width: 43.75em; /* 700px @ 16px */
margin: 2em auto;
background: #fff;
padding: 20px;
@@ -27,34 +27,53 @@ a {
display: none;
}
-/*styles for 480px and up!*/
-@media only screen and (min-width: 480px), only screen and (max-width: 620px) {
+/*styles for 300 and up @ 16px!*/
+/* The max-width declaration below blocks this from ever working */
+@media only screen and (min-width: 18.75em){
+ body {
+ background: yellow;
+ }
+}
+
+
+/*styles for 480px - 620px @ 16px!*/
+@media only screen and (min-width: 30em) and (max-width: 38.75em) {
body {
background: green;
}
}
-/*styles for 620px and up! (let's try this one minified )*/
-@media screen and (min-width: 620px),only print,projector{body{background:red;}}
-/*styles for 800px and up!*/
-@media screen and (min-width: 800px){
+@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}
+
+/*styles for 800px and up @ 16px!*/
+@media screen and (min-width: 50em){
body {
background: blue;
}
}
-/*styles for 1100px and up!*/
-@media screen and (min-width: 1100px){
+/*styles for 1100px and up @ 16px!*/
+@media screen and (min-width: 68.75em){
body {
background: orange;
}
}
-/*styles for 1300px and up!*/
-@media screen and (min-width: 1300px){
+/*one with pixels too! */
+/* NOTE - if the user were to increase his browser font size to 20px (chrome: Large),
+ the above (68.75em) media query will be incorrectly ignored!!!
+
+ Assuming 20px browser setting, we would expect to see this progression:
+ yellow > green > red > blue > NAVY > orange
+
+ However, the orange never kicks in... which seems like a browser bug!
+ Here's the math (assuming 20px browser setting):
+ 1200/20 = 60em < 68.75em
+*/
+@media screen and (min-width: 1200px){
body {
background: navy;
}
View
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Respond JS Test Page</title>
<link href="test.css" rel="stylesheet"/>
- <link href="test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
+ <link href="test2.css" media="screen and (min-width: 37.5em)" rel="stylesheet"/> <!-- 37.5em = 600px @ 16px -->
<script src="../respond.src.js"></script>
</head>
<body>
@@ -14,7 +14,7 @@
<p>For a realistic use case for media queries: read up on <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a></p>
- <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
+ <p id="attribute-test">Media-attributes are working too! This should be visible above 37.5em.</p>
</body>
</html>

0 comments on commit bff28c1

Please sign in to comment.