为什么要用em而不是px？ [英] Why em instead of px?

问题描述

我听说你应该用em而不是像素来定义样式表中的大小和距离。所以问题是为什么我应该使用em而不是px在css中定义样式时？是否有一个很好的例子来说明这一点？

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that illustrates this?

推荐答案

我问这个问题的原因是因为我忘了如何使用em是一段时间我在CSS中高兴地入侵。人们没有注意到我保持这个问题一般，因为我不在谈论字体本身的大小。我更感兴趣如何在页面上任何给定的块元素上定义样式。

The reason I asked this question was because I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested how to define styles on any given block element on the page.

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

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px however sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

这是一个说明示例。假设我们有一个div标签，我们想变成一个时尚的日期框，我们可能有html代码，看起来像这样：

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have html-code that looks like this:

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

一个简单的实现将定义日期框的宽度 class in px：

A simple implementation would defining the width of the date-box class in px:

* { 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;
}

问题

但是，如果我们想在浏览器中设置文本大小，设计将会中断。文本也会流出框外，这与SO的设计几乎相同，因为 flodin 指出。这是因为框将保持相同的宽度，因为它锁定为 50px 。

The problem

However if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

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

A smarter way is to define the width in ems instead:

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倍大小。

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

这篇关于为什么要用em而不是px？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！