About
This is a jQuery plugin that displays live @media information in the corner of the screen. As the browser window, screen size, and other device properties change, this jQuery script displays the @media query (if any) used for the design. Super-helpful for doing responsive design.
The visual @media plugin displays a toggle button in the bottom-left corner of the browser window. Designed for easy drop-in-anywhere functionality. If you can improve anything in the script, let me know. To see a live demo, resize the browser and watch the @media queries change dynamically. Works great in all modern browsers (i.e., not old IE).
How to use
See the demo HTML file to see how it works and all fits together. Basically just make sure to include visual-media-queries.js and visual-media-queries.css in your document’s <head> section (or just before the closing </body> tag). Note that the styles in visual-media-queries.css use the exact same @media queries as the xy.css stylesheet. I mention this because they are easily “swappable” or simply appended to any whatever stylesheet you’re working with.
Download
The download ZIP file contains the following files:
visual-media-queries.htmlvisual-media-queries.cssvisual-media-queries.jsxy.css