How to convert px into % like we convert px to em for Font-Size?_问答_开发者

I was using em but facing problem in nested items so I decided to use % as yui suggesting.

To chang开发者_如何转开发e the size of a font, always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels).

How to convert px into %? like this is for Px to em http://pxtoem.com/

Edit

I found this example is very good but it's only till 24px.

http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html

How to calculate size in % for each size in px. As a example case, according to this table what will be size in % for 45px

There are already 2 answers posted, however, they're not correct. Every CSS property that accepts percentage length, defines how these values are being computed. In the terms of font-size, this is what CSS 2.1 says:

Percentages: refer to inherited font size

It will never depend on window size or so.

How to convert pixels into percents: in most cases, 16px is the default value for font-size - this is 100%. 45px will thus be 100% * 45px / 16px = 281.25%.

Percentage is for fluid layouts, it will always be dependent on the browser actual size and it will change upon resize, while fixed layout will never change no matter what the browser size is.

In others words, what you are trying to do, you will need to assume something that is never right.

For example, you could assume that 100% would be 1024px, but on my screen, that will be 1920px...

How to convert px into %?

You can't. A percentage is a proportion of the font size of the parent element and ultimately (when you get to the <html> element) falls back to the user's preference (which is an unknown value). A pixel size is a size in pixels (which can vary depending on the DPI).

like this is for Px to em http://pxtoem.com/

That makes assumptions about what the user's default font size is. This assumption will often be wrong.

If you want to make the same assumption, then 1em is the same as 100% (and 0.75em is the same as 75% and so on).

You don't even need to convert it yourself … the table you linked to includes percentage values!

All major browsers work with pixels internally so it will do the calculation for you. You can easily get the pixel size of the font by getting the font-size with JavaScript (in my case I use jQuery).

See test case on jsFiddle

Edit: I need more coffee, just read the question again and realized you needed the opposite.

To get the oppsite you could do like in this test case

However, you will have to know the base pixel to compare against. In the above test case I get both the percentages from the parent font-size and from the body element.

I used Firebug for this once. I used to put percent in font-size and checked in "Computed" tab. If it is same as it was in actual document then I came to know I need this percent value. After few converts, you know what percent will fit with what px in your document. Not very simple but not tough either.

Put the html and body tags at 100%. Then set every size using percentage. This will be relative to these tags, and then you get a perfect fluid layout.

Simple formular for converting PX to % is TCR i.e Target % Context = Result * 100

this formula applicable for both font pixel to % and Fixed content box to percentage box

if your font size is 45px(target) and content value is lets put default value of font 16(Content) and your result is 2.81 and multiply with 100 you will get 281.25 and you round the value 281 %.

Ex: Finding the width in percentage of a 200px div inside a 1000px container:

200 / 1000 = .2 => Move decimal place over two to the right and this leaves you with 20% width.

Ex2: Convert left and right padding of a div to percentage where padding is 10px and element width is 350px and everything is inside a 1000px container. Here we disregard the overall container since we are dealing with padding leaving us with context being 350px and the target of 10px. Our left and right padding would then be:

10 / 350 = 0.02857142857142857 (Keep entire decimal to make sure everything is mathematically perfect) => Move decimal point over two to the right leaving you with 2.857142857142857% left and right padding.