【发布时间】：2011-03-20 23:18:15
【问题描述】：
px和em有什么区别？
【问题讨论】：
【发布时间】：2011-03-20 23:18:15
【问题描述】：
认识单位
- “Ems” (em)：“em”是用于 Web 文档的可扩展单元 媒体。一个 em 等于当前的字体大小，例如，如果 文档的字体大小为 12pt，1em 等于 12pt。 EMS是 本质上是可扩展的，所以 2em 等于 24pt，.5em 等于 6pt， 等。 Ems 在 Web 文档中变得越来越流行，因为 可扩展性及其对移动设备友好的特性。
像素 (px)：像素是屏幕中使用的固定大小单位 媒体（即在计算机屏幕上阅读）。一个像素相等 到计算机屏幕上的一个点（您的最小分割 屏幕分辨率）。许多网页设计师在网页中使用像素单位 文档以产生像素完美的表示 他们的网站在浏览器中呈现。一个问题 像素单位是视障者不按比例放大 阅读器或向下以适合移动设备。
点 (pt)：点传统上用于印刷媒体（任何 即打印在纸上等）。一分等于1/72 一英寸。点很像像素，因为它们是固定大小的 单位，不能按比例缩放。
百分比 (%)：百分比单位很像“em”单位，除了一个 基本的区别很少。首先，当前的 字体大小等于 100%（即 12pt = 100%）。在使用 百分比单位，您的文本在移动设备上保持完全可扩展性 和可访问性。
那么，有什么区别？
当您在实际中看到字体大小单位时，很容易理解它们之间的区别。一般来说，1em = 12pt = 16px = 100%。使用这些字体大小时，让我们看看当您将基本字体大小（使用 body CSS 选择器）从 100% 增加到 120% 时会发生什么
如您所见，em 和百分比单位都会随着基本字体大小的增加而变大，但像素和点不会。为文本设置绝对大小很容易，但访问者更容易使用可在任何设备或任何机器上显示的可缩放文本。因此，网络文档文本首选 em 和百分比单位。
Em 与百分比
我们已经确定点和像素单位不一定最适合 Web 文档，因此我们只能使用 em 和百分比单位。理论上，em 和百分比单位是相同的，但在应用中，它们实际上存在一些需要考虑的细微差别。
在上面的示例中，我们使用百分比单位作为我们的基本字体大小（在 body 标签上）。如果您将基本字体大小从百分比更改为 ems（即 body { font-size: 1em; }），您可能不会注意到差异。让我们看看当“1em”是我们的正文字体大小时会发生什么，以及当客户端更改其浏览器的“文本大小”设置时会发生什么（这在某些浏览器中可用，例如 Internet Explorer）。
当客户端的浏览器文本大小设置为“中”时，ems 和 percent 之间没有区别。然而，当设置改变时，差异是相当大的。在“最小”设置中，em 远小于百分比，而在“最大”设置中，则完全相反，em 显示远大于百分比。虽然有些人可能会争辩说 em 单位是按照真正的意图进行缩放的，但在实际应用中，em 文本的缩放过于突然，最小的文本在某些客户端机器上变得难以辨认。
【讨论】：
1 em = 从您的文档字体大小中获取字体大小。它本质上是相对的。
100% = 也从文档字体大小中获取大小。
一般
12pt=1em=100%=16px
在最佳实践中使用 %，因为它与您的宽度相关，它会自动根据设备调整设备。
【讨论】：