# 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.