为什么用em而不是px？

Question

听说您应该在样式表中使用em而不是像素来定义尺寸和距离。所以问题是，为什么在CSS中定义样式时应该使用em而不是px？有一个很好的例子可以说明这一点吗？

Answer 1

我问这个问题的原因是，我忘记了如何使用em，因为我在CSS中愉快地编程时已经很久了。人们没有注意到我把这个问题笼罩了，因为我并不是在谈论字体本身的大小。我对如何在页面上的
任何给定块元素 上定义样式更感兴趣。

正如Henrik Paul和其他人指出的，em与元素中使用的字体大小成正比。在px中以块元素定义大小是一种常见的做法，但是，在浏览器中调整字体大小通常会破坏这种设计。调整字体大小通常是通过快捷键Ctrl++或Ctrl+完成的-。因此，一个好的做法是使用em代替。

使用px定义宽度

这是一个说明性的例子。假设我们有一个div标签，我们希望将其变成一个时尚的日期框，我们可能会有如下所示的HTML代码：

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

一个简单的实现将以date-boxpx 为单位定义类的宽度：

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

问题

但是，如果我们要在浏览器中放大文本大小，则设计会中断。文字也会在框外出血，这与flodin指出的SO设计中的情况几乎相同。这是因为该框的宽度保持与锁定时相同的大小50px。

改用em

一个更聪明的方法是用ems定义宽度：

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

这样，您就可以在日期框上进行流畅的设计，即框将与文本一起按日期框定义的字体大小按比例放大。在此示例中，font-
size的定义*为10pt，它将是该字体大小的2.5倍。因此，在浏览器中调整字体大小时，该框的大小是该字体大小的2.5倍。