Created
October 11, 2012 00:23
-
-
Save bencallahan/3869385 to your computer and use it in GitHub Desktop.
I suspect that we actually want our media queries to apply to much more than just "screen." At Sparkbox, we've just been leaving off the media type (from "screen and (min-width: 30em)" to "(min-width: 30em)"). Obviously, most UAs that *shouldn't* be "scre
This file contains hidden or 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
| <body> | |
| <h1>Media Query Tests</h1> | |
| <p class="p0"></p> | |
| <p class="p1"></p> | |
| <p class="p2"></p> | |
| <p class="p3"></p> | |
| <p class="p4"></p> | |
| <p class="p5"></p> | |
| <p class="p6"></p> | |
| <p class="p7"></p> | |
| <p class="p8"></p> | |
| <p class="p9"></p> | |
| <p class="p10"></p> | |
| <p class="p11"></p> | |
| <p class="p12"></p> | |
| </body> |
This file contains hidden or 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
| p:before { | |
| content: "False"; | |
| color: red; | |
| } | |
| @media screen and (min-width: 750px) { | |
| p.p0:before { | |
| content: "True: screen and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media not print { | |
| p.p1:before { | |
| content: "True: not print"; | |
| color: green; | |
| } | |
| } | |
| @media print { | |
| p.p2:before { | |
| content: "True: print"; | |
| color: green; | |
| } | |
| } | |
| @media not print and (min-width: 750px) { | |
| p.p3:before { | |
| content: "True: not print and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media (not print) and (min-width: 750px) { | |
| p.p4:before { | |
| content: "True: (not print) and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media not (print and (min-width: 750px)) { | |
| p.p5:before { | |
| content: "True: not (print and (min-width: 750px))"; | |
| color: green; | |
| } | |
| } | |
| @media (min-width: 750px) and not print { | |
| p.p6:before { | |
| content: "True: (min-width: 750px) and not print"; | |
| color: green; | |
| } | |
| } | |
| @media not print, (min-width: 750px) { | |
| p.p7:before { | |
| content: "True: not print, (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media screen, (min-width: 750px) { | |
| p.p8:before { | |
| content: "True: screen, (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media not print and all and (min-width: 750px) { | |
| p.p9:before { | |
| content: "True: not print and all and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media not print and only (min-width: 750px) { | |
| p.p10:before { | |
| content: "True: not print and only (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media not print and only and (min-width: 750px) { | |
| p.p11:before { | |
| content: "True: not print and only and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } | |
| @media only not print and (min-width: 750px) { | |
| p.p12:before { | |
| content: "True: only not print and (min-width: 750px)"; | |
| color: green; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment