Pixel To Percentage Conversion In CSS
As you might already know, Internet Explorer won’t allow its users to resize a Web Site’s text if its font-size has been defined using pixel units.
To overcome this issue, you need to define your font size using percentages. Percentages define the font size of an element relative to the font size of its parent element, which might be a bit confusing, especially if you’re used to using pixels. But I’ve recently been shown a simple trick that enables you to convert from pixels to percentages :
Most browsers set the font size to the equivalent of 16px by default. To convert the pixel value we need to percentage, we do the following :
- For a 13px text: 13 / 16 = 0.8125 = 81.25%
- For an 18px text: 18 / 16 = 1.125 = 112.5%
The examples should be self-explanatory. We just move the first three digits (from the left) of the results to the left of the floating point to get the percentage value. Note that if the element’s parent’s font-size has been set to 14px (for example), then you need to divide by 14, not 16.
I personally won’t bother with percentages just to support Internet Explorer, but this might be handy in future projects.
Does this work with all Pixel formats?
Can I resize my frames and pictures using the same process?
Not sure Kyle, I’ve only used it for text.
Hey Kyle Charlton,
I’ve used this for images as well and it worked for me just fine.
- Dwayne Charrington.
http://www.dwaynecharrington.com
Hi! I have recently updated my webpage, now I am using percentual values in text sizes. What I want to say that IE remains tha nightmare, because in some circumstances IE apply percentual values differently as other browsers like FF or Opera.
I’m a newbie css/web programmer and i’m currently modifying all the pixels set on the existing website to percent value. Can you help me with this? I’ll deeply appreciate your e-mail.