Permalink
Browse files

Resolved a conflict with the min file when meging em-support

  • Loading branch information...
2 parents b441f41 + bff28c1 commit e4bd0a6f88b6e3fee45c1d6bebf66ca4e8c0de7c scottjehl committed Jan 16, 2012
Showing with 71 additions and 31 deletions.
  1. +6 −2 respond.min.js
  2. +42 −18 respond.src.js
  3. +21 −9 test/test.css
  4. +2 −2 test/test.html
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
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
@@ -151,8 +154,8 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
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|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
- maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
+ 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,7 +175,34 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
styleBlocks = {},
lastLink = links[ links.length-1 ],
now = (new Date()).getTime(),
- eminpx = parseFloat( docElem.currentStyle ? body.currentStyle.fontSize : document.defaultView.getComputedStyle( body, null ).getPropertyValue( "font-size" ) );
+ 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 ){
@@ -188,23 +218,17 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
var thisstyle = mediastyles[ i ],
min = thisstyle.minw,
max = thisstyle.maxw;
-
- if( min ){
- min = min.replace( "px", "" );
- if( min.indexOf( "em" ) ){
- min = parseFloat( min.replace( "em", "" ) ) * eminpx;
- }
+
+ if( !!min ){
+ min = parseFloat( min ) * ( /em/i.test( min ) ? eminpx : 1 );
+ }
+ if( !!max ){
+ max = parseFloat( max ) * ( /em/i.test( max ) ? eminpx : 1 );
}
- if( max ){
- max = max.replace( "px", "" );
- if( max.indexOf( "em" ) ){
- max = parseFloat( max.replace( "em", "" ) ) * eminpx;
- }
- }
- if( !min && !max ||
+ if(!min && !max ||
( !min || min && currWidth >= min ) &&
- ( !max || max && currWidth <= max ) ){
+ ( !max || max && currWidth <= max )){
if( !styleBlocks[ thisstyle.media ] ){
styleBlocks[ thisstyle.media ] = [];
}
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,15 +27,17 @@ a {
display: none;
}
-/*styles for 300 and up!*/
-@media only screen and (min-width: 15em) {
+/*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;
}
}
-@media only screen and (min-width: 24em), only screen and (max-width: 40em) {
+/*styles for 480px - 620px @ 16px!*/
+@media only screen and (min-width: 30em) and (max-width: 38.75em) {
body {
background: green;
}
@@ -44,23 +46,33 @@ a {
-@media screen and (min-width: 40em),only print,projector{body{background:red;}}
+@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}
-/*styles for 800px and up!*/
+/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
body {
background: blue;
}
}
-
-@media screen and (min-width: 70em){
+/*styles for 1100px and up @ 16px!*/
+@media screen and (min-width: 68.75em){
body {
background: orange;
}
}
/*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 e4bd0a6

Please sign in to comment.