px和em之间的区别

Question

px和em有什么区别？

Answer 1

查看关于CSS-Tricks的优秀教程 :

px - em - % - pt - 关键字

Answer 2

与单位见面

1. "Ems"(em):"em"是一个可扩展的单元,用于Web文档媒体.em等于当前的字体大小,例如,如果文档的字体大小为12pt,则1em等于12pt.Ems本质上是可扩展的,因此2em等于24pt,.5em等于6pt等.由于可扩展性和移动设备友好性,Ems在Web文档中变得越来越流行.

2. 像素(px):像素是固定大小的单位,用于屏幕媒体(即在计算机屏幕上阅读).一个像素等于计算机屏幕上的一个点(屏幕分辨率的最小分度).许多网页设计师在网络文档中使用像素单元,以便在浏览器中呈现网站时生成像素完美的网站表示.像素单元的一个问题是它不会向视觉受损的阅读器向上扩展或向下扩展以适应移动设备.

3. 点数(pt):传统上在打印介质中使用的点(任何要在纸上打印的东西等).一点等于1/72英寸.点与像素非常相似,因为它们是固定大小的单位,不能缩放.

4. 百分比(%):百分比单位与"em"单位非常相似,除了一些基本差异.首先,当前的字体大小等于100%(即12pt = 100%).使用百分比单位时,您的文本仍可完全扩展到移动设备和可访问性.

那么,有什么区别？

当你看到它们在行动中时,很容易理解字体大小单位之间的区别.通常,1em = 12pt = 16px = 100%.使用这些字体大小时,让我们看看当您将基本字体大小(使用正文CSS选择器)从100%增加到120%时会发生什么

如您所见,随着基本字体大小的增加,em和百分比单位都会变大,但像素和点数不会增加.可以很容易地为文本设置绝对大小,但访问者可以更轻松地使用可在任何设备或任何计算机上显示的可伸缩文本.因此,em和百分比单位是Web文档文本的首选.

Em与百分比

我们已经确定点和像素单元不一定最适合Web文档,这使我们得到em和百分比单位.从理论上讲,em和百分比单位是相同的,但在应用中,它们实际上有一些重要的差异,这些差异很重要.

在上面的示例中,我们使用百分比单位作为基本字体大小(在body标签上).如果您将基本字体大小从百分比更改为ems(即body {font-size:1em;}),您可能不会注意到差异.让我们看看当"1em"是我们的正文字体大小时,以及当客户端改变其浏览器的"文本大小"设置时会发生什么(这在某些浏览器中可用,例如Internet Explorer).

当客户端的浏览器文本大小设置为"中"时,ems和百分比之间没有区别.但是,当设置改变时,差异非常大.在"最小"设置中,ems远小于百分比,并且当处于"最大"设置时,它恰好相反,ems显示远大于百分比.虽然有些人可能认为em单元正在按照它们真正意图进行缩放,但在实际应用中,em文本会突然缩放,最小的文本在某些客户机上变得难以辨认.

信息来自http://kyleschaeffer.com

Answer 3

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

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

一般的

12pt=1em=100%=16px

在最佳实践中使用％，因为它与您的宽度有关，它会自动调整设备到设备。