CSS 如何将 px 转换为 % 就像我们将 px 转换为 em 的 Font-Size 一样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7240654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert px into % like we convert px to em for Font-Size?
提问by Jitendra Vyas
I was using embut facing problem in nested items so I decided to use %as yuisuggesting.
我用em，但在嵌套项目面临的问题，所以我决定用%作为锐暗示。
To change 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).
要更改字体的大小，请始终使用百分比作为单位，因为它们比 em 呈现更一致，并且因为它们允许用户启动调整大小（与像素不同）。
How to convert px into %? like this is for Px to em http://pxtoem.com/
如何将px转换为%？像这样的 Px 到 em http://pxtoem.com/
Edit
编辑
I found this example is very good but it's only till 24px.
我发现这个例子非常好，但只有 24px。
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
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
如何计算 .in 中%每个大小的大小px。作为一个例子情况下，根据这个表会是怎样的规模%为45px
回答by duri
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:
已经发布了2个答案，但是，它们不正确。每个接受百分比长度的 CSS 属性都定义了这些值的计算方式。就 而言font-size，这就是 CSS 2.1 所说的：
Percentages: refer to inherited font size
百分比：指继承的字体大小
It will never depend on window size or so.
它永远不会依赖于窗口大小左右。
How to convert pixels into percents: in most cases, 16pxis the default value for font-size- this is 100%. 45pxwill thus be 100% * 45px / 16px = 281.25%.
如何将像素转换为百分比：在大多数情况下，16px是默认值font-size- 这是100%. 45px因此将是 100% * 45px / 16px = 281.25%。
回答by Quentin
How to convert px into %?
如何将px转换为%？
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).
你不能。百分比是父元素字体大小的比例，最终（当你到达<html>元素时）回退到用户的偏好（这是一个未知值）。像素大小是以像素为单位的大小（可能因 DPI 而异）。
like this is for Px to em http://pxtoem.com/
像这样的 Px 到 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 1emis the same as 100%(and 0.75emis the same as 75%and so on).
如果要做出相同的假设，则1em与100%（并且与等等0.75em相同75%）相同。
You don't even need to convert it yourself … the table you linked to includes percentage values!
您甚至不需要自己转换它……您链接到的表格包含百分比值！
回答by Satya Prakash
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.
我曾经为此使用过 Firebug。我曾经将百分比放在字体大小中并检查“计算”选项卡。如果它与实际文档中的相同，那么我就知道我需要这个百分比值。经过几次转换后，您就知道了适合您文档中的像素的百分比。不是很简单，但也不难。
回答by balexandre
Percentage is for fluid layouts, it will always be dependent on the browser actual size and it will change upon resize, while fixed layoutwill never change no matter what the browser size is.
百分比用于流体布局，它始终取决于浏览器的实际大小，并且会在调整大小时发生变化，而无论浏览器大小如何，固定布局都不会改变。
In others words, what you are trying to do, you will need to assumesomething that is never right.
换句话说，你正在尝试做的事情，你需要假设一些永远不会正确的事情。
For example, you could assume that 100% would be 1024px, but on my screen, that will be 1920px...
例如，您可以假设 100% 是 1024 像素，但在我的屏幕上，这将是 1920 像素...
回答by mekwall
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-sizewith JavaScript (in my case I use jQuery).
所有主要浏览器都在内部使用像素，因此它会为您进行计算。您可以通过font-size使用 JavaScript获取字体的像素大小（在我的例子中我使用 jQuery）。
Edit: I need more coffee, just read the question again and realized you needed the opposite.
编辑：我需要更多咖啡，再次阅读问题并意识到您需要相反的内容。
To get the oppsiteyou could do like in this test case
为了获得该oppsite你可以在不喜欢这个测试用例
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-sizeand from the bodyelement.
但是，您必须知道要与之比较的基本像素。在上面的测试用例中，我从父元素font-size和body元素中获得了百分比。
回答by Simpa
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.
将 html 和 body 标签置于 100%。然后使用百分比设置每个尺寸。这将是相对于这些标签，然后你会得到一个完美的流体布局。
回答by Balaji K S
Simple formular for converting PX to % is TCRi.e Target % Context = Result * 100
用于转换到PX％简单表现公式是TCR即ŤARGET％Çontext = - [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 %.
如果你的字体大小是 45px(target) 并且内容值是让字体 16(Content) 的默认值和你的结果是 2.81 并乘以 100 你会得到 281.25 并且你把值四舍五入 281%。
回答by Paras
Ex: Finding the width in percentage of a 200px div inside a 1000px container:
例如：在 1000 像素容器内以百分比形式查找 200 像素 div 的宽度：
200 / 1000 = .2 => Move decimal place over two to the right and this leaves you with 20% width.
200 / 1000 = .2 => 将小数点向右移动两位，这样就剩下 20% 的宽度。
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:
Ex2：将 div 的左右内边距转换为百分比，其中内边距为 10 像素，元素宽度为 350 像素，并且所有内容都在 1000 像素的容器内。在这里，我们忽略了整个容器，因为我们正在处理填充，让我们的上下文为 350 像素，目标为 10 像素。我们的左右填充将是：
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.
10 / 350 = 0.02857142857142857（保留整个小数以确保一切在数学上都是完美的）=> 将小数点向右移动两位，留下 2.857142857142857% 左右填充。
