Html px和em之间的差异

px和em之间有什么区别？

1 em=从文档字体大小中提取字体大小。它在本质上是相对的

100%=也从文档字体大小获取大小

一般的

12pt=1em=100%=16px

在最佳实践中，使用%因为它是相对于您的宽度的，它将自动调整设备到设备。

满足单位要求

“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%。使用这些字体大小时，让我们看看将基本字体大小（使用主体CSS选择器）从100%增加到120%时会发生什么

正如您所看到的，em和百分比单位随着基本字体大小的增加而变大，但像素和点不会变大。设置文本的绝对大小很容易，但访问者使用可在任何设备或机器上显示的可伸缩文本要容易得多。因此，web文档文本首选em和百分比单位

Em与百分比之比

我们已经决定，点和像素单位不一定最适合web文档，这就给我们留下了em和百分比单位。理论上，EM和百分比单位是相同的，但在实际应用中，它们实际上有一些小的差异，这是很重要的。 在上面的示例中，我们使用百分比单位作为基本字体大小（在body标记上）。如果您将基本字体大小从百分比更改为ems（即body{font size:1em；}），您可能不会注意到差异。让我们看看当“1em”是我们的主体字体大小时，以及当客户端更改浏览器的“文本大小”设置时（在某些浏览器中，如Internet Explorer中，这是可用的）会发生什么。

当客户端的浏览器文本大小设置为“中等”时，ems和百分比之间没有差异。但是，当改变设置时，差异相当大。在“最小”设置中，ems远小于百分比，而在“最大”设置中，情况正好相反，ems显示的值远大于百分比。虽然有些人可能会争辩说，em单元正在按其实际用途进行缩放，但在实际应用中，em文本的缩放过于突然，在某些客户端机器上，最小的文本变得难以辨认

信息取自

可能重复的