CSS像素转百分比

Question

好的，这个问题似乎已经被问了很多次，但是通过查看其他问题仍然没有找到我想要的简明答案，所以我会用自己的方式来提问。我想使用以下CSS代码创建一个包含器的网站：

.container {
     height: 100%;
     margin: 0 auto;
     width: 980px;
}

然而，对于宽度，我想使用百分比，但我无法找到一个简单的答案，甚至找不到一个把PX转换为%的网站，或者至少得到一个代替980px或960px所用百分比的答案。是62.5%还是70%？

请有人帮助我回答这个简单的问题，或者至少给我一个可以查看转换率的网站，在任何人回答PX到EM网站之前，我已经看过它了，但它并不清晰，因为该网站更适用于字体大小。

感谢任何能够回答这个问题的人！

- GeordieDave1980

---

每个人都使用自己的屏幕分辨率。百分比是根据父级（在这种情况下为屏幕分辨率）而定。您可以将包装器设置为980px，然后在其中使用子元素的百分比，但仅限于此。 - Medda86

请查看此链接：https://pastebin.com/raw/qfHvRAYa - Nanoo

Answer 1

我不想打击你的信心，但这里可能会有一些人对你翻白眼。

百分比相对于父容器的大小。 50％ 表示“父容器宽度的一半”。没有“px-％”转换，因为一个是固定值，而另一个是可变比率。那就是... 为什么你找不到这样的东西。

- Niet the Dark Absol

---

但这是什么？https://nekocalc.com/px-to-percentage-converter 我不理解这个转换器。 - s1w_

完全没有意义。默认情况下（可编辑），它假定16px = 100％，并相应地给出比率。 - Niet the Dark Absol

Answer 2

问题：如何以百分比获取子元素？

1. A) 子元素宽度: 例如 760px
2. B) 父元素宽度: 例如 1024px

您可以使用 jQuery 轻松获取父元素或子元素的宽度。例如：$('#parent').width()

然后应用以下数学运算以获取子元素的百分比值:
(A / B) * 100

代入数值:
(760/1024) * 100 = 74.22% ，问题得到解决。

- soufrani

Answer 3

不要将像素转换为百分比，而是尝试以百分比获取元素的尺寸，例如：

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;

- donprecious Iyeritufu

---

以编程方式实现是一个好建议。 - Jean G.T