Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated media queries to use more accurate EMs and used EMs for parag…

…raph width to allow for a more accurate testing environment
  • Loading branch information...
commit ef54fc70650105602deaa340be4524bc8f623c7e 1 parent 013166d
Ryan Wheale authored
Showing with 15 additions and 10 deletions.
  1. +14 −9 test/test.css
  2. +1 −1  test/test.html
View
23 test/test.css
@@ -12,8 +12,8 @@ body {
}
p {
width: 60%;
- min-width: 300px;
- max-width: 700px;
+ min-width: 18.75em; /* 300px @ 16px */
+ max-width: 43.75; /* 700px @ 16px */
margin: 2em auto;
background: #fff;
padding: 20px;
@@ -27,15 +27,16 @@ a {
display: none;
}
-/*styles for 300 and up!*/
-@media only screen and (min-width: 15em) {
+/*styles for 300 and up @ 16px!*/
+@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), only screen and (max-width: 38.75em) {
body {
background: green;
}
@@ -44,23 +45,27 @@ 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,
+ the above (1100px/68.75em) media query would preside!!!
+ 1200/20 = 60em < 68.75em
+*/
@media screen and (min-width: 1200px){
body {
background: navy;
View
2  test/test.html
@@ -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>
Please sign in to comment.
Something went wrong with that request. Please try again.