Byronyasgur's Blog

Random Web Developer Stuff, Mostly WordPress

Media Query Top Labeller

on June 30, 2012

I am working on my first real responsive website and I was finding it hard to get my head around which media query was affecting the display. I’m sure there are tons of other ways of doing the same thing but this one is pure css and works quite well. It uses the :after pseudo class to add the content to body and you can read which query you are on at the top of the page. Just put the code in your css file. You turn it on and off by commenting out the display:none line. You can adjust the line height if you’re designing to a baseline grid. Obviously it’s important to adjust the actual break points so that they resemble your own and you can change the labels accordingly too; the ones I have here are more or less from “Twitter Bootstrap”. You’ll probably want to remove it before you deploy also.  Feel free to use/share/adjust etc any way you like.

/* ]=Media Query Top Labeller
-----------------------------------------------------------**/
body:before {
content:"DEFAULT";
line-height:24px;
display:block;
text-align:center;
width:100%;
font-size:16px;
background:black;
color:#ccc;
position:fixed;
z-index:10000;
opacity:0.5;
top:0;
left:0;
display:none; /* comment this line out to turn the code "on" */
}
@media (max-width: 480px) {
body:before {
content:"SMARTPHONE";
}
}
@media (min-width: 481px) and (max-width: 768px) {
body:before {
content:"SMARTPHONE LANDSCAPE / TABLET PORTRAIT";
}
}
@media (min-width: 768px) and (max-width: 979px) {
body:before {
content:"TABLET LANDSCAPE";
}
}

@media (min-width: 1200px) {
body:before {
content:"WIDE DISPLAY";
}
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: