I use MesureIt! to measure pixels on websites, generally to check if things add up right when developing. I'm making a fluid layout right now, and would really like to do the same, but I couldn't find anything that would show me measurements in % (relative to the window). Is there anything that does this?


I would use a calculator.

100 / screenWidth * elementWidth

But what should that be good for? The designer should set up the percentages once for the layout. Screen sizes are different, thus also the computed percentages would differ, depending on what screen size you are using such a ruler.

100 / 1600 * 900 = 56.25%

100 / 1024 * 900 = 87.89%
  • Shouldn't that be 100 * elementWidth / screenWidth? Dec 27 '12 at 17:04
  • The point of percentages is that they scale to fit the screen, so that the ratio is always the same no matter what the screen is. Dec 27 '12 at 17:05
  • @Glycan "Shouldn't that be…" Which is exactly the same, as 5 * 4 is the same as 4 * 5. And yes, I know why to use percentages, but the initial values must be set on a specific, defined display width. I also often use em values for such purposes.
    – feeela
    Dec 27 '12 at 18:50
  • Oh, you just grouped it bizarrely, it looks like 100/(screen*element). Dec 28 '12 at 0:40

I have written a short javascript code that could help you:

alert( 100 / document.body.offsetWidth * document.getElementById("<YOUR_ELEMENT_ID").offsetWidth );

You have to insert in the line above the ID of the elements that you want to know the percentual width related to the window width.

You can insert this line of code in firefox url bar (preceded by "javsacript:") or in the chrome debug consolle (CTRL+SHIFT+I then find in the left bottom corner the 'Show console' icon)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.