Css 如何将px转换为%就像我们将px转换为em来表示字体大小一样?

Css 如何将px转换为%就像我们将px转换为em来表示字体大小一样?,css,Css,我使用的是em,但嵌套项中存在问题,所以我决定按照建议使用% 要更改字体大小,请始终使用百分比作为单位 因为它们的渲染比ems更加一致,并且允许 用户启动的大小调整(与像素不同) 如何将px转换为%?就像这是Px对em一样 编辑 我发现这个例子很好,但它只到24像素 如何为px中的每个大小计算%中的大小。例如,根据此表,%对于45px的%大小百分比对于流体布局,它将始终取决于浏览器的实际大小,并在调整大小时改变,而无论浏览器大小如何,固定布局都不会改变 换句话说,你要做的是,你需要假设一些永远

我使用的是
em
,但嵌套项中存在问题,所以我决定按照建议使用
%

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

如何将px转换为%?就像这是Px对em一样

编辑

我发现这个例子很好,但它只到24像素


如何为
px
中的每个大小计算
%
中的大小。例如,根据此表,
%
对于
45px

%
大小百分比对于流体布局,它将始终取决于浏览器的实际大小,并在调整大小时改变,而无论浏览器大小如何,固定布局都不会改变

换句话说,你要做的是,你需要假设一些永远不对的事情


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

所有主要浏览器都在内部使用像素,因此它将为您进行计算。通过使用JavaScript获取
字体大小
(在我的例子中,我使用jQuery),您可以轻松获得字体的像素大小

编辑:我需要更多的咖啡,只要再读一遍问题,就会意识到你需要的恰恰相反

要想进入对方的网站,你可以在


但是,您必须知道要与之进行比较的基本像素。在上面的测试用例中,我从父级
字体大小
正文
元素中获取百分比。

已经发布了两个答案,但是它们不正确。每个接受百分比长度的CSS属性都定义如何计算这些值。就字体大小而言,CSS 2.1就是这么说的:

百分比:指继承的字体大小

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

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

如何将px转换为%

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

就像这是Px对em一样

这会对用户的默认字体大小进行假设。这种假设往往是错误的

如果您想做出相同的假设,那么
1em
100%
相同(而
0.75em
75%
相同,依此类推)


您甚至不需要自己进行转换…您链接到的表包含百分比值

这一次我用了Firebug。我过去常常在字体大小中输入百分比,然后在“计算”选项卡中进行检查。若它和实际文档中的一样,那个么我知道我需要这个百分比值。经过几次转换后,您就知道什么百分比适合文档中的px。不是很简单,但也不难

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

将PX转换为%的简单公式是TCR i、 eTarget%Context=Result*100

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

如果您的字体大小为45px(目标),内容值为16(内容)的默认值,结果为2.81,乘以100,则得到281.25
然后将值四舍五入为281%。

例如:在1000px容器中查找200px div的宽度百分比:

200/1000=.2=>将小数位移到2的右边,这样您就有了20%的宽度

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


10/350=0.02857142857142857(保留整个小数点以确保所有内容在数学上都是完美的)=>将小数点移到2的右边,留下2.857142857142857%的左右边距。

你应该用
em
解决问题,而不是强迫百分比做他们不适合做的事情。@progo-你是对的
em
使用
62.5%
技术很容易计算。但问题在于嵌套元素和
62.5%
将默认字体大小设置为
10px
,读起来很小。我想他说的是字体大小,在这种情况下你错了。字体大小的百分比基于最接近的父字体大小,该父字体大小有一个设定值,与浏览器窗口大小无关。与往常一样,处理百分比时,它归结为基数。+1谢谢-他们在这里使用的方法与使用
body的方法相同吗{font:13px/1.231 arial,helvetica,clean,无衬线;*字体大小:small;/*适用于IE*/*字体:x-small;/*适用于处于怪癖模式的IE*/}
从错误的假设开始会产生错误的结果。这个伟大的工具将帮助您进行css单位转换。请参阅自定义转换->像素-百分比。我确实知道这种感觉。虽然我的问题通常是我无法阅读。@Lollero哈哈,我也尽了最大的努力做相反的事情,我认为结果很好!只是巴斯