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更改为%，但我不知道如何以准确的方式实现这一目标。我发现this从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。要准确读取字体大小，请查看：The font-size CSS property

Answer 2

您可以自由地提及宽度的百分比，但最好为高度指定“px”或“em”。

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;
 width : 90% ;
  height: 100px;
max-width : 600px ;
left: 10%;
right : 10% ;
  top: 50px;
  background: gray ;

}

#footer {
  position: fixed;
 width : 90% ;
  height: 100px;
max-width : 600px ;
left: 10%;
right : 10% ;
  bottom: 10px;
  line-height: 10px;
  font-size: 10px;
  background: gray ;
}

<div id="header">
  header
</div>

<div id="footer" >
  footer
</div>

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

2 个答案: