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

问题描述

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

解决方案

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

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

使用 px 定义宽度

这是一个说明性的例子.假设我们有一个 div 标签，我们想把它变成一个时尚的日期框，我们可能有如下所示的 HTML 代码:

<p class="月">七月</p><p class="day">4</p>

一个简单的实现是在 px 中定义 date-box 类的宽度:

* { margin: 0;填充:0；}p.month { 字体大小:10pt;}p.day { 字体大小:24pt;字体粗细:粗体；}div.date-box {背景颜色:#DD2222；字体系列:Arial、sans-serif；白颜色;宽度:50px；}

问题

但是，如果我们想在浏览器中放大文本的大小，设计就会中断.文本也会在框外流血，这与 SO 的设计发生的情况几乎相同 flodin 指出.这是因为框的宽度将保持不变，因为它被锁定为 50px.

使用 em 代替

更聪明的方法是在 em 中定义宽度:

div.date-box {背景颜色:#DD2222；字体系列:Arial、sans-serif；白颜色;宽度:2.5em；}* { 边距:0;填充:0；字体大小:10pt；}//日期框的初始宽度 = 10 pt x 2.5 em = 25 pt//如果你使用 px 而不是 pt 也能工作

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

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?

解决方案

The reason I asked this question was that 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 in how to define styles on any given block element on the page.

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.

Using px to define the width

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>

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

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.

Using em instead

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

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屋！