Permalink
Browse files

adding new post and demo page

  • Loading branch information...
1 parent 11b7ae5 commit 20c98515a61a06c362269918dc51a042ffb80cb1 @wyattdanger committed Mar 31, 2012
@@ -0,0 +1,23 @@
+---
+layout: post
+title: "Keeping Track of Media Queries"
+date: 2012-03-31 11:17
+comments: true
+categories: [css, sass, responsive design]
+---
+
+When building a responsive design, it can be helpful to have a reminder of which media query is currently in effect. It's easy to use CSS generated content to display the current query.
+
+<!-- more -->
+
+{% gist 2265989 %}
+
+The [above snippet](https://gist.github.com/2265989) is in SASS, and is also [available](https://gist.github.com/2266035) in CSS.
+
+#### Demo
+
+[Here is a demo](/which-media-query-demo/)
+
+#### Mobile First
+
+It should be noted that the above queries work around a mobile-first approach. It assumes that your base styles will be written for mobile devices, and that you'll progressively enhance from there, remembering that [layout is an enhancement](/2012/02/01/responsive-enhancement).
@@ -0,0 +1,36 @@
+<html>
+ <head>
+ <title>Demo - Keeping Track Of Media Queries</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style type='text/css'>
+ body {
+ font-family: "Helvetica Neue", "Helvetica", Arial;
+ background: #eee;
+ color: #333;
+ font-size: 1rem;
+ font-weight: 700;
+ }
+ body::before {
+ font-size: 3rem;
+ content: "< 480px"; }
+ @media only screen and (min-width: 480px) {
+ body::before {
+ content: "480px < 600px"; } }
+ @media only screen and (min-width: 600px) {
+ body::before {
+ content: "600px < 768px"; } }
+ @media only screen and (min-width: 768px) {
+ body::before {
+ content: "768px < 992px"; } }
+ @media only screen and (min-width: 992px) {
+ body::before {
+ content: "992px < 1382px"; } }
+ @media only screen and (min-width: 1382px) {
+ body::before {
+ content: "1382px <"; } }
+ </style>
+ </head>
+ <body>
+ <br/>Resize me, bro.
+ </body>
+</html>

0 comments on commit 20c9851

Please sign in to comment.