首页 文章

为什么em而不是px？

提问于
浏览 次
706

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

css units-of-measurement em

14 回答

  • 0

    您可能希望将em用于字体大小，直到IE6消失（从您的站点） . 当页面缩放（与文本缩放相反）成为标准行为时，Px将会正常 .

    Traingamer已经提供了neccessary links .

    回复于
  • 512

    我问这个问题的原因是我忘记了如何使用em 's as it was a while I was hacking happily in CSS. People didn' t注意我保持这个问题一般，因为我不是在谈论调整字体本身 . 我对如何在页面上的 any given block element 上定义样式更感兴趣 .

    正如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>

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

    * { 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 的宽度相同 .

    使用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倍 .

    回复于
  • 87

    使用px精确放置图形元素 . 使用em进行测量，必须在文本元素周围进行定位和间距，如行高等.px像素精确，em可以随着使用的字体动态变化

    回复于
  • 7

    来自thomasrutter的最高投票回答是对他们的回应 . 但是像素的大小是非常错误的 . 所以，即使它已经老了，我也不能让它变得不足 .

    电脑屏幕通常不是96dpi！ （或者ppi，如果你想变得迂腐 . ）

    像素没有固定的物理尺寸 .
    （是的，它仅在一个屏幕内固定，但在下一个屏幕中，像素很可能更大或更小，当然不是1/96英寸 . ）

    Proof
    画一条线，长960像素 . 用物理标尺测量它 . 是10英寸？没有..？
    将笔记本电脑连接到电视 . 线路现在是10英寸？还没有？
    在iPhone上显示该行 . 还是一样大小？为什么不？

    谁发明了96dpi计算机屏幕神话？
    （有些宗教以72dpi神话运作 . 但同样错误 . ）

    回复于
  • 2

    如果你想使用px来指定字体大小，但是仍然希望通过将它放在你的CSS文件中来提供em的可用性，这是一个简单的解决方案：

    body {
  font-size: 62.5%;
}

    现在指定 p （和其他）标签，如下所示：

    p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

    等等 .

    回复于
  • 8

    It's of use for everything that has to scale according to the font size.

    它在通过缩放字体大小实现缩放的浏览器上特别有用 . 因此，如果使用 em 调整所有元素的大小，它们会相应地缩放 .

    回复于
  • 21

    我有一台高分辨率的小型笔记本电脑，必须以120％的文本缩放率运行Firefox，才能在不眯眼的情况下阅读 .

    许多网站都存在此问题 . 布局变得全乱，按钮中的文本被切成两半或完全消失 . 甚至stackoverflow.com也会受到影响：

    Screenshot of Firefox at 120% text zoom

    请注意顶部按钮和页面选项卡如何重叠 . 如果他们使用em单位而不是px，那就不会有问题了 .

    回复于
  • 47

    使用em或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小 . 如果使用px中指定的字体进行设计，则如果用户选择较大的文本大小，则不会更改大小（在IE 6和其他中） . 这对于有视觉障碍的用户来说非常糟糕 .

    有关这类设计的几个例子和文章（有无数可供选择），请参阅最新一期的A List Apart：Fluid Grids，旧文章How to Size Text in CSS或Dan Cederholm的Bulletproof Web Design .

    您的图像仍应以px大小显示，但一般来说，使用px调整文本大小并不适合 .

    尽管我个人鄙视IE6，但它是目前唯一批准我们财富200强公司大部分用户的浏览器 .

    回复于
  • 60

    对于它来说's worth, here'是CSS中不同单位的定义：http://www.w3.org/TR/css3-values/#lengths .

    回复于
  • 2

    例：

    代码：body {font-size：10px;} //保持10以下所有尺寸都正确，更改此值，其余更改为例如1.4这个值

    1 {font-size：1.2em;} // 12px

    2 {font-size：1.4em;} // 14px

    3 {font-size：1.6em;} // 16px

    4 {font-size：1.8em;} // 18px

    5 {font-size：2em;} // 20px

    ...

    身体

    1

    2

    3

    4

    五

    通过改变身体中的值，其余的自动变化是基础值的一种...

    10×2 = 20 10×1.6 = 16等

    您可以将基值设置为8px ...所以8×2 = 16 8×1.6 = 12.8 //可以通过浏览器舍入

    回复于
  • 10

    因为em（http://en.wikipedia.org/wiki/Em_(typography)）与当前使用的字体大小成正比 . 如果字体大小是16分，则一个em是16分 . 如果您的字体大小为16像素（注意：与点不同），则一个em为16像素 .

    这导致两个（相关的）事情：

    • 如果您选择稍后在CSS中编辑字体大小，则很容易保持比例 .

    • 许多浏览器都支持自定义字体大小，覆盖CSS . 如果以像素为单位设计所有内容，则在这些情况下布局可能会中断 . 但是，如果您使用ems，这些覆盖应该可以缓解这些问题 .

    回复于
  • -1

    一个非常实际的原因是，如果使用px指定字体，IE 6不允许您调整字体大小，而如果使用相对单位（如em或百分比）则会调整字体大小 . 不允许用户调整字体大小对于可访问性非常不利 . 虽然它在下降，但仍然有很多IE 6用户在那里 .

    回复于
  • 137

    说一个是比另一个更好的选择是错误的（或两者都不会在规范中给出自己的目的） . 甚至值得注意的是StackOverflow广泛使用px单元 . Spoike被告知这不是一个糟糕的选择 .

    Definition of units

    • px 是一个绝对的测量单位（如in，pt或cm），也恰好是单位的1/96（更多的是为什么以后） . 因为它是绝对测量，所以可以在任何时候使用它来定义特定大小的东西，而不是与浏览器窗口的大小或字体大小等其他东西成比例 .

    与所有其他绝对单位一样，px单位不会根据浏览器窗口的宽度进行缩放 . 因此，如果整个页面设计使用绝对单位（如px而不是％），则它将无法适应浏览器的宽度 . 这本质上不是好的或坏的，只是设计师在坚持精确尺寸和不灵活与拉伸之间需要做出的选择，但在此过程中不遵守确切的尺寸 . 对于站点来说，通常会混合使用固定大小和灵活大小的对象 .

    固定大小的元素通常需要合并到页面中 - 例如广告 Banner ，徽标或图标 . 这可确保您在设计中几乎总是需要至少一些基于px的测量 . 例如，图像将（默认情况下）缩放，使得每个像素的大小为1 * px *，因此如果您围绕图像进行设计，则需要px单位 . 它对于精确的字体大小调整以及边框宽度也非常有用，由于四舍五入，因此对于大多数屏幕使用px单位最有意义 .

    所有绝对测量值都是严格相关的;也就是说，1in总是96px，就像1in总是72pt一样 . （请注意，在谈论基于屏幕的媒体时，1in几乎从不实际上是物理英寸） . 所有绝对测量假设标称屏幕分辨率为96ppi，并且桌面监视器的标称观看距离，并且在这样的屏幕上，一个px将等于屏幕上的一个物理像素，并且一个将等于96个物理像素 . 在像素密度或观看距离上显着不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放了页面，则px将不再与物理像素相关 .

    • em 不是绝对单位 - 它是相对于当前所选字体大小的单位 . 除非你通过使用绝对单位（例如px或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响，如果他们已经制作了字体，那么它没有意义使用em作为长度的一般单位，除非您特别希望它按字体大小比例缩放 .

    当您特别希望某些内容的大小取决于当前字体大小时，请使用em .

    • % 也是相对单位，在这种情况下，相对于父元素的高度或宽度 . 如果您的设计不依赖于特定像素大小来设置其大小，它们是px单元的良好替代品，例如设计的总宽度 .

    在设计中使用％单位可以使您的设计适应屏幕/设备的宽度，而使用绝对单位（如px）则不然 .

    回复于
  • 2

    普遍的共识是使用百分比来进行字体大小调整，因为它在浏览器/平台之间更加一致 .

    虽然很有趣，但我总是习惯使用pt进行字体大小调整，我假设所有网站都使用了它 . 你通常不会在其他应用程序中使用px大小（例如Word） . 我想这是因为它们用于打印 - 但是在Web浏览器中的大小与Word中的大小相同...

    回复于

相关问题