The Ruler Is The Most Accurate Means Of Measurement

Notice The Top / Left Borders Of This Page

I came across this simple screen ruler, created by ProWebDesign, and recently began using it all the time. Though this may not be a new concept for some, I figured I'd share.

Simply add it to your CSS like so:


body {
	background: #COLOR 
	url(http://www.prowebdesign.ro/screen-ruler/screeen-ruler.png) 
	top left no-repeat;
}

And remove it when you're done.

Purpose:

Super quick mobile / desktop prototyping and resolution testing
You have total control: Resize to any resolution you want - no more fussing with presets, and no distracting UI
Media Query Perfection
My favorite: Added convenience while developing in CodePen Editor Mode

Ruler Variables:

5px Step
Red rectangles stand for the most common mobile device resolutions.
Green rectangles stand for the most common desktop and laptop resolutions.