如何根据CSS转换的像素计算百分比？

Question

我有这个CSS样式:

body {
  padding: 0;
  margin: 0;
  font-family: bentonsans-regular, sans-serif;
  font-size: 14px;
  background-image: url(../affiliate/amex/images/background.png);
  background-repeat: repeat-y;
  background-position: top left;
}

#header {
  position: fixed;
  left: 150px;
  top: 50px;
}

#footer {
  position: fixed;
  left: 150px;
  right: 50px;
  bottom: 10px;
  height: 100px;
  line-height: 10px;
  font-size: 10px;
}

我需要改变它们px,%但我不知道如何以准确的方式实现这一目标.我发现这个转换为px,em但这不是那么有用.网站有人能指出我正确的方向吗？有任何想法吗？建议？解决方案？

Answer 1

它实际上取决于元素所在的上下文.永远记住简单的公式目标/背景

我不认为你会找到转换器,因为我说,这取决于上下文.

例如:要在1000px容器内转换为300px的百分比

300/1000 = 0.3即30%

如果300px的填充量为10px并且您想要转换它,请考虑将300px作为容器(上下文)来应用公式.所以

10/300 = 0.0333333333,即3.3333333%(保留小数)

对于字体大小,如果将font-size设置为100%,则表示浏览器的默认字体大小的100%,对于主要浏览器,最可能是16px.要准确读取字体大小,请检查:font-size CSS属性