Question

我正在开始一个新项目并认为我会给他们以前但是我注意到当使用填充，边距，行高等等（除了字体之外的任何东西）浏览器不能正确计算它们。

示例：

我使用Firebug快速定位元素周围使用像素然后我使用公式像素大小/基本字体在我的样式表中翻译它们。所以25px / 16px = 1.5625

当我刷新浏览器时，元素出现了几个像素，似乎我必须将它向上或向下舍入，或者在一个案例中它真的出来了！

只是我或是否有其他人注意到或有解决方案？

答案：我的基本字体错了!!

Answer 1

我使用公式像素大小/基数在样式表中翻译它们字体。所以25px / 16px

如果您使用的是ems，最好留下像素。 16px基本字体的想法是不可靠的。它只是一般指南，因为你不知道用户的真实基本字体（系统字体）大小是什么，因为它们可以将它设置为任何东西（尽管大多数人可能不会触摸它）。

当你处理百分比的像素时，每个浏览器都有自己的处理方式（例如向上或向下舍入），你必须让浏览器做它的事情。在网络上，所有都是相对的，只要您将页面的元素设置为彼此的比例很好，设计应该可以在任何缩放级别或视口宽度下很好地工作。

Answer 2

当嵌套在子元素中时，EM会变得复杂。例如，如果您使用body font-size：是16px，然后在标题中您有1.1em，那么在该标题内您有菜单项并将其设置为1em，它将等于1.1em的父项（大多数）可能大约18px）。

解决这个问题的方法是使用REM，它代表“根”EM。这可以防止您的大小在嵌套时被复合。但是，在各种浏览器上对此的支持有限。要解决此问题，请使用PX后备。在后备中，任何浏览器都将使用最后一个可接受的规则。如果它不理解规则（REM），它会忽略它，因此使用PX。

header {
   font-size: 18px;
   font-size: 1.1rem;
}
nav {
   font-size: 16px;
   font-size: 1rem;
}

最后，重要的是要了解EM / REM类似于PERCENTAGES，而非固定像素。