我使用em
但在嵌套项目中遇到问题,所以我决定使用%
作为yui建议。
要更改字体大小,请始终使用百分比作为单位 因为它们比ems更加一致,并且因为它们允许 用户启动的大小调整(与像素不同)。
如何将px转换为%?像这样是Px到em http://pxtoem.com/
修改
我发现这个例子非常好,但它只有24px。
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
如何计算%
中每个尺寸px
的尺寸。作为一个示例,根据此表,%
45px
大小
答案 0 :(得分:10)
已经发布了2个答案,但是,它们不正确。每个接受百分比长度的CSS属性都定义了这些值的计算方式。在font-size
方面,这就是CSS 2.1所说的:
百分比:参考继承的字体大小
它永远不会取决于窗口大小。
如何将像素转换为百分比:在大多数情况下,16px
是font-size
的默认值 - 这是100%
。因此,45px
将为100%* 45px / 16px = 281.25%
。
答案 1 :(得分:1)
如何将px转换为%?
你做不到。百分比是父元素的字体大小的一部分,并且最终(当您到达<html>
元素时)回落到用户的首选项(这是一个未知值)。像素大小是以像素为单位的大小(可以根据DPI而变化)。
像Px到em http://pxtoem.com/
这假设用户的默认字体大小是什么。这种假设通常是错误的。
如果您想做同样的假设,那么1em
与100%
相同(0.75em
与75%
相同,依此类推。)
您甚至不需要自己转换它... 您链接的表包含百分比值!
答案 2 :(得分:0)
百分比是针对流畅布局,它总是取决于浏览器的实际大小,并且会在调整大小时发生变化,而固定布局永远不会改变,无论是什么浏览器大小是。
换句话说,你要做的是什么,你需要假设一些永远不对的东西。
例如,您可以假设100%将是1024px,但在我的屏幕上,这将是1920px ......
答案 3 :(得分:0)
所有主流浏览器都在内部使用像素,因此它会为您进行计算。您可以通过JavaScript获取font-size
(在我的情况下使用jQuery)轻松获取字体的像素大小。
编辑:我需要更多咖啡,只需再次阅读问题并意识到您需要相反的事情。
要获得对象,您可以在this test case
中进行操作但是,您必须知道要比较的基本像素。在上面的测试用例中,我得到了父font-size
和body
元素的百分比。
答案 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%。