如何将px转换为%,就像我们将px转换为em的字体大小一样?

时间:2011-08-30 08:38:33

标签: css

我使用em但在嵌套项目中遇到问题,所以我决定使用%作为yui建议。

  

要更改字体大小,请始终使用百分比作为单位   因为它们比ems更加一致,并且因为它们允许   用户启动的大小调整(与像素不同)。

如何将px转换为%?像这样是Px到em http://pxtoem.com/

修改

我发现这个例子非常好,但它只有24px。

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

如何计算%中每个尺寸px的尺寸。作为一个示例,根据此表,%

45px大小

8 个答案:

答案 0 :(得分:10)

已经发布了2个答案,但是,它们不正确。每个接受百分比长度的CSS属性都定义了这些值的计算方式。在font-size方面,这就是CSS 2.1所说的:

  

百分比:参考继承的字体大小

它永远不会取决于窗口大小。

如何将像素转换为百分比:在大多数情况下,16pxfont-size的默认值 - 这是100%。因此,45px将为100%* 45px / 16px = 281.25%

答案 1 :(得分:1)

  

如何将px转换为%?

你做不到。百分比是父元素的字体大小的一部分,并且最终(当您到达<html>元素时)回落到用户的首选项(这是一个未知值)。像素大小是以像素为单位的大小(可以根据DPI而变化)。

  

像Px到em http://pxtoem.com/

这假设用户的默认字体大小是什么。这种假设通常是错误的。

如果您想做同样的假设,那么1em100%相同(0.75em75%相同,依此类推。)

您甚至不需要自己转换它... 您链接的表包含百分比值!

答案 2 :(得分:0)

百分比是针对流畅布局,它总是取决于浏览器的实际大小,并且会在调整大小时发生变化,而固定布局永远不会改变,无论是什么浏览器大小是。

换句话说,你要做的是什么,你需要假设一些永远不对的东西。

例如,您可以假设100%将是1024px,但在我的屏幕上,这将是1920px ......

答案 3 :(得分:0)

所有主流浏览器都在内部使用像素,因此它会为您进行计算。您可以通过JavaScript获取font-size(在我的情况下使用jQuery)轻松获取字体的像素大小。

请参阅test case on jsFiddle

编辑:我需要更多咖啡,只需再次阅读问题并意识到您需要相反的事情。

要获得对象,您可以在this test case

中进行操作

但是,您必须知道要比较的基本像素。在上面的测试用例中,我得到了父font-sizebody元素的百分比。

答案 4 :(得分:0)

我曾经使用过Firebug一次。我曾经把百分比放在font-size中,并在“Computed”标签中查看。如果它与实际文档中的相同,那么我才知道我需要这个百分比值。经过少量转换,您知道什么百分比符合文档中的px。不是很简单,但也不是很难。

答案 5 :(得分:-1)

将html和body标签置于100%。然后使用百分比设置每个大小。这将与这些标签相关,然后您将获得完美的流体布局。

答案 6 :(得分:-1)

将PX转换为%的简单公式为 TCR T arget% C ontext = R esult * 100

此公式适用于字体像素到%和固定内容框到百分比框

如果你的字体大小是45px(目标),而内容值是让我们把字体16(内容)的默认值和你的结果是2.81并乘以100你会得到281.25 并且您将值舍入281%。

答案 7 :(得分:-1)

Ex:在1000px容器内找到200px div的百分比宽度:

200/1000 = .2 =&gt;将小数位移到右边两位,这样就可以得到20%的宽度。

Ex2:将div的左右填充转换为填充为10px且元素宽度为350px的百分比,并且所有内容都在1000px容器内。在这里我们忽略了整个容器,因为我们正在处理填充,使我们的上下文为350px,目标为10px。我们的左右填充将是:

10/350 = 0.02857142857142857(保持整数十进制以确保一切在数学上都是完美的)=&gt;将小数点向右移动两位,使您的左右填充为2.857142857142857%。