Whenever I build a responsive website I fine-tune the design while checking it out at as many different screen sizes as possible. This shows me where the design starts to break apart. I will usually setup the website to use various breakpoints, or points where the design will adapt to different screen sizes. If the design breaks apart, I will alter my style sheet declarations inside the appropriate media query to fix it.
If the design needs help when the screen is 880px wide, I will look for the media query in the style sheet that will cover the 880px size.
What if you just want to see how big the window is?
There are a number of ways to do this.
One way is to use css to append text to a div that shows which width range (that you defined in your media queries) is active.
Another way, and the method we'll focus on, is to use jQuery to show exactly how wide and tall the window is. I saw this active on http://quirktools.com/screenfly
First thing is to make sure that jQuery is included either in the head of the document or just before the closing </body> tag.
Secondly, create a div with an id of ruler like:
After you include jQuery,
include the following script tag:
This will show the width and height of window after you resize the window. It will look like the image below:
Go ahead and test it out. Pretty cool right?
I use this trick while developing sites and then remove the script and the div before the site goes from development to production.