Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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?

share|improve this question

2 Answers

up vote 1 down vote accepted

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)

share|improve this answer
up vote 1 down vote

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%
share|improve this answer
Shouldn't that be 100 * elementWidth / screenWidth? – Glycan 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. – Glycan 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). – Glycan Dec 28 '12 at 0:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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