Skip to content

Instantly share code, notes, and snippets.

@imjakechapman

imjakechapman/Responsive Design Indicator

Created October 25, 2012 18:47
Show Gist options
  • Save imjakechapman/3954623 to your computer and use it in GitHub Desktop.
Save imjakechapman/3954623 to your computer and use it in GitHub Desktop.
Download ZIP
This creates a small indicator at the top left of your current document which tells you the current media query you are working with
Raw
Responsive Design Indicator
INSERT HTML RIGHT AFTER OPENING <body> TAG
<!-- responsive indicator -->
<aside id="responsive_size"></aside>
INSERT CSS AT BOTTOM OF CSS FILE ( or anywhere else you'd like, I like to put it at the bottom just so I don't forget to take it out after development. )
#responsive_size { background: #abc123; border-radius: 2px; color: #fff; display: block; height: 24px; padding: 0 8px; position: fixed; top: 10px; left: 10px; text-align: center; width: 64px; z-index: 9999;}
@media and screen (min-width:1140px) {
#responsive_size:before { content: "1400+"; }
}
@media and screen and (min-width:960px) and (max-width:1139px) {
#responsive_size:before { content: "960px - 1140px"; }
}
@media and screen and (min-width:768px) and (max-width:959px) {
#responsive_size:before { content: "768px - 959px"; }
}
@media and screen and (min-width:680px) and (max-width:767px) {
#responsive_size:before { content: "320px - 767px"; }
}
@media and screen and (min-width:320px) and (max-width:680px) {
#responsive_size:before { content: "320px - 680px"; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment