When making a responsive WordPress theme, it is good to be sure that I’m previewing the changes in my browser with the viewport at an appropriate size to show the changes I’m making in my code.
To make things easier when developing a site I add a few snippets of css into the stylesheet within the media queries section to add a transparent pseudo element before the html body which appears as an overlay at the top of the page.
The css required for this is very simple.
My first media query section in my stylesheet is headed
@media only screen and (max-width: 1139px) {
This tells me that the breakpoint is 1139px, so I add the following rules
body:before {
background: #ff9;
color: #333;
content: "max-width: 1139px";
display: block;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 99999;
}
The pixel value for the content rule should match the media query’s max-width.
The colors and background rules can be tweaked, I think it looks best with a transparent gradient, so I like to use the following:
body:before {
background: -moz-linear-gradient( left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient( left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient( left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient( left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
background: linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
color: #fff;
content: "max-width: 1139px";
display: block;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 99999;
}
The next breakpoint is 1023px, so I add a rule to change the content added in the previous rule within the next media query block:
body:before {
content: "max-width: 1023px";
}
Similar rules should be added for each size defined in a media query.
Once the site goes live these rules should be deleted.
A Plugin?
I am thinking of making a plugin to help streamline this, however I don’t think the media query values can easily be grabbed from the active theme’s stylesheet, so the sizes would need to be manually set in a plugin options page. Then, the additional CSS rules would be created in php and a function like
if (current_user_can('update_core'))
could be used to enable the responsive size indicator to only be seen by a logged-in admininstrator.