我应该以像素或ems定义CSS边距吗？为什么？什么时候？

Question

我们有一个CSS文件,其中包含一些类似于以下内容的规则:

.directory-result ul
{
    margin-top: 20px;
    width: 60em;

}

.about-text
{
    margin-top: 1em;
    margin-bottom: 1em;
}

一切正常,但我们特别想知道保证金最高值之间的不一致.一个是20px,另一个是1em.

哪个是最好的？在决定使用哪些时,我应该考虑哪些要点？谢谢.

Answer 1

em当元素的大小取决于页面的比例时,单位用于更好的页面可伸缩性.这对于旧浏览器(例如IE6)和移动平台尤为重要.

px单位用于绝对值,而em相对于特定元素的字体大小. 1em意味着一个字体行,例如,你有一个字体大小的盒子12px,意味着1em将等于12px

此外,使用px似乎更容易,因为您知道确切的值,但em单位继承其容器的值.

<p>Text</p>
<div class="box">
  <p>Lorem</p>
</div>

p {
  font-size: 1.2em;
}

.box {
  font-size: 1.2em;
}

在这种情况下,第一个<p>将使字体大小等于基本字体大小*1.2,第二个<p>将使用font-size*1.2*1.2显示.

Answer 2

它们只是两种不同的测量方法。Em 与字体大小相关（传统上，1em 大致是给定字体中字母 M 的宽度），而 px 是像素。

如果您使用 em 构建所有内容，则当用户调整字体大小时（例如使用 IE 的页面 > 文本大小菜单），所有内容都会相应缩放。它还可以更轻松地按照垂直节奏进行工作。

当您想要构建“像素完美”的东西时，像素会更好。请注意，CSS 像素并不总是等于屏幕像素 - 主要是因为现代浏览器和移动设备允许缩放。但这通常不是问题，因为整个页面都会相应缩放。

无论你做什么，都要确保自始至终保持一致——这会让以后的生活变得更加轻松。