logo标签列表

HTML/CSS中的像素和点有什么区别？

htmlcsspixelpoints
53

在创建HTML页面时，我应该在CSS中使用像素还是点来指定像margin之类的内容？

它们中的哪一个被认为比另一个更好的实践？有任何优缺点吗？

1
两者都不被认为是“最佳实践”。通常鼓励使用em或％值。 - ceejayoz
3
em是一种度量单位，基于当前字体中字母'm'的大小。使用em指定大小，可根据字体大小确定尺寸，这意味着您可以更改字体，而布局会随之改变。 - Spudley
4
我还没有看到任何关于浏览器如何执行缩放的答案。对于浏览器而言，像素是一种相对度量单位，这就是为什么我认为下面一半的回答都是无用的原因。如果像素是一种相对度量单位，那为什么要使用它（或不使用它）而不是点? 缩放规则会发生变化吗？使用其中一种是否提供更好的参考？ - user166390
@Spudley：有趣，我不知道……如果那是一个答案，我会点赞它（虽然可能不会接受它:P），感谢提供信息！ :) - user541686
1
@pst：通常当用户知道正确答案时，他们会将其发布为答案，以便每个人都能受益。 - Sparky
显示剩余4条评论
8个回答
38

使用 px 或 em

Points (pt): Points通常用于印刷媒体（任何要印在纸上的东西等）。一个Point等于1/72英寸。Points与像素类似，都是固定大小单位，无法缩放。

通常来说，1em = 12pt = 16px = 100%。

[结论]

胜出者: 百分比（%）。

  • 约翰B的注释：这是针对文本。 显然，您问的是“像边距之类的东西。”（我想您也是指 padding ）。对于这一点，我建议使用px或em 。个人而言，我根据具体情况进行切换。

更多文章

Point值仅适用于打印CSS！

（在下面的评论）

Points只适用于印刷？不是这样的。

点并不仅限于打印使用。理论上，点是用来定义绝对尺寸的。像素并不是绝对的，因为它们根据您的屏幕和所选定义（而不是分辨率）而改变（每英寸像素数可以从150dpi到75dpi）。这意味着您的像素可能会有一个大小，或者可能只有一半大小。这也意味着你设计的文本在你的屏幕上看起来很清晰，但在客户的屏幕上可能会显得过大（"请把字体缩小一点，好吗？"），或者在邻居的屏幕上看起来太小以至于无法阅读（"嘿，你前几天介绍给我的那个网站？你说你曾经在上面工作过...我看不太清楚文字，它太小了"）。

点是解决此问题的一种方法。但是浏览器和操作系统需要管理它们。基本上，这意味着：

浏览器必须使用给定值（比如10pt）和屏幕的实际分辨率来计算显示大小的像素值； 操作系统必须通知实际当前的分辨率，而不是默认值。

还有：

2
这个真实参考资料吗？该文章接着说了非常不准确的“像素在显示器上用于字体大小是完全准确的”，这显然是错误的。想象一下1）具有动态缩放功能的iPhone/iPad/Android 2）任何现代浏览器都可以执行全面缩放。因此，我对将其用作参考来源表示怀疑。 - user166390
2
+1 感谢您的编辑。虽然这并不是一个答案，但是有一些有趣的链接来推动讨论的发展。;-) - user166390
1
抱歉，我加入了我的个人偏好，对于margin或padding来说，单位是px或em。 - JohnB
4
这个回答过时了。在所有常见的浏览器上，使用像素是完美的比例尺度。 - soupagain
10

经验规则是：

屏幕显示使用像素；打印使用点。

'em' 或 '%'（还有较少人知道的 rem）更适合创建更灵活的布局。

em 是一个基于当前字体中字母 'm' 大小的度量单位。使用 em 指定大小允许你按照字体大小设置尺寸，这意味着你可以更改字体而布局会相应地改变。

但也有很多情况下需要使用固定大小。在这种情况下，px 通常是最好的选择，因为大多数网页都是在像素为基础的屏幕上显示的。但如果你计划要频繁打印页面，则可以使用点为基础的样式表进行打印特定布局。

总的来说，我建议使用 em 而不是 px 或 pt。如果你正在使用 px，那是因为你的页面上有一些以像素为大小的元素（例如图片），你需要其他的布局与之相适应。在这种情况下，由于图像是以像素为单位的，所以样式表也应该使用像素为单位。此外，因为点是一个打印度量单位，无法保证它们在屏幕上的显示效果：而像素为基础的 px 可以在跨浏览器和跨平台上给你更一致的外观。

顺便说一下，这个页面可能会给你一些进一步的信息：http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

1
如果大多数网页在基于像素的屏幕上显示，而DPI不是保证或恒定的，那么使用像素而不是点有什么区别呢？ - user166390
2
一般我会推荐使用 em 而不是 px 或者 pt。如果你正在使用 px，那是因为你的页面上有像图片这样以像素为单位的元素，你需要让其他布局与之相适应。在这种情况下，由于图片是以像素为单位的，所以样式表也应该是以像素为单位的。此外，因为点是打印单位，无法保证它们在屏幕上的显示效果：px 是基于屏幕的，因此可以在跨浏览器和跨平台的屏幕上给你更一致的外观。 - Spudley
小修正：传统上，“em”指的是大写字母“M”所放置在金属或木材块的宽度。但现在，在网络上，“em”指的是默认字体大小。 - DA.
1
虽然px是屏幕测量单位，pt是打印单位，但它们在不同浏览器或平台上的一致性并没有明显差别，因为它们都是虚拟测量单位。也就是说，1px不一定等于屏幕上的一个物理像素。 - DA.
除非你是CSS纯粹主义者，否则不要使用ems。像素在所有常见的浏览器中都能完美显示和缩放。 - soupagain
6
“点”很好，因为它们的高度是1/72英寸。您知道您的文本将有多高。像素的问题在于，它们的分辨率越高，它们就会变小。如果您想在背景图片周围换行文本，则像素非常适合。需要一些工作，但可以制作出漂亮的页面。我听说像素在IE中不可调整大小-因此，如果他们想增加字体大小，他们就无法这样做。我不使用IE，所以无法确定。记得听说过。EM会让你完全取决于个人在浏览器中定义字体大小的方式。 Ems和百分比使其易于操作。我总是使用点。
[…]
不，点并不是最好的。对于任何发现此线程的人，请忘记您曾经读过这篇文章。这是一个网页设计论坛。用于在屏幕媒体上显示页面。点仅包含在CSS中，用于印刷设计。用于印刷媒体样式表。它们不能像％和em那样进行缩放。如果您是任何类型的网页设计师，您应该努力使您的页面易于访问，并且使用点会立即对此构成打击。

http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

有趣的是，每个人都回答“像素或％/ em”，而不是“像素或点”。

我不知道两者之间有什么区别。

更多信息

编辑：更多信息...官方的！

不要在屏幕样式表中使用pt等绝对长度单位指定字体大小。它们在不同平台上呈现不一致，并且无法被用户代理（例如浏览器）调整大小。 保留这些单位的用法以在具有固定和已知物理属性的媒体上进行样式设置（例如打印）。

这些点的大小保证为1/72英寸，还是太适应缩放像素屏幕DPI了？ - user166390
2
根据我所了解的，除非打印时，否则它并不保证是1/72英寸...查找“更多信息”。 - Kraz
呵呵，那么何时使用“像素”和“点”...不过链接很棒。 - user166390
除非你是一个纯粹的CSS幻想主义者，否则不要使用ems。像素在所有常见浏览器中都可以完美显示和缩放。 - soupagain
3
任何告诉你要使用像素的人都是错误的。像素可以正常工作，但它们根本不必要……永远不必要！点是指定绝对度量的一种完全有效的方式。在我们通常使用的网页比例上，点更常被使用。
除了点之外，还有字、英寸、厘米等。选择它们中的任意一个就像说：“我应该用英尺还是英寸来测量这个房间？”让常识指引你，它们都能完成工作。
"em"这个单位，在某些答案中被提到，应该保留在适当的时候使用。“当这个元素缩放时，我希望另一个元素也随之缩放”。这就是相对度量的作用。我知道这已经超出了你原来问题的范围，但我不得不解决一些关于“总是使用em”的荒谬说法。
顺便说一下，像素并不等于物理像素。如今，样式表中的px表示1/96英寸。这就是为什么我说不要使用它们的原因。大多数人并不知道这一点。他们使用它们以为自己是在指定实际像素。这让我难以认真对待这些人（虽然我不责怪那些人，我指责混乱状态的本质，这也是我呼吁消除像素的原因。）。此外，如果像素真的表示像素，它们将是指定尺寸的可怕方式。想象一下，基于无法控制的任意屏幕分辨率，事物会随机缩小和增长。太吓人了！远离像素！在实践中它们可以工作，但只是由于浏览器制造商和操作系统开发者做出的不可见的努力，理论上它们是一个可怕的模棱两可的指定意图的方式。
2
约翰B上面的答案是最好和最准确的。我只想指出他上面的答案可能会引起的混淆。在排版中，“em”是所选择字体中字母“m”的宽度。为了指定字体高度，印刷/排版工人使用“x高度”，即字体的小写字母x的高度。
正如约翰所指出的，pt是一个固定的度量单位，相当于1/72英寸。由于显示器具有不同的像素密度（72/英寸、96/英寸...），因此通常不是HTML文档中调整大小的好方法。
em直接关联到旧的排版单位，并且是一个很好的相对度量。随着屏幕尺寸的缩放，字体大小也会相应缩放。如果您使用em来设置边距，它们将根据您的字体大小进行相对缩放，这通常是一件好事。
但是，对于边距、填充和所有与字体无直接关系的东西，最好使用rem或“相对em”。最好的方法是最初为body或html标记声明默认字体大小。例如，body font-size = 16px是一个很好的起点。然后在文档中的任何其他地方，使用em来设置文本，使用rem来设置其他所有内容。或者，使用百分比。两者都可以很好地工作。就像em和rem一样，您的%相对于那个最初的16px = 100%的字体大小。
文档中的所有内容都将相对于您在16px下为您的100%字体大小的初始设置进行缩放。这样，您只需要在文档中使用一次像素测量。如果以后要设置媒体查询来调整大小和边距以适应不同设备显示器上的不同像素密度，则只需针对body标记中的一个初始声明即可。其他所有内容都将根据该内容进行相对调整，并且无需更改。
只是一个想法， maxw3st
1

我认为这取决于你想做什么。

我觉得关键问题是距离是否需要随着窗口大小调整而调整？一些单位是相对的，一些（如像素和点）则不是 - 简要描述在这里。

我很少见到使用点，当需要绝对测量时，像素似乎更常见。

像素和点都是绝对的。例如，百分比值是相对的。我想这只是更多基于计算机概念（像素）和更多基于排版概念（点）之间的区别。 - brabster
0
答案是：这取决于你的用途。你是将边距作为平衡、可调整大小布局的一部分，还是只是提供了边缘周围的间隙？在第一种情况下，百分比更好，在第二种情况下像素更好。
你应该尝试不同的可能性，并确定哪种方法最适合你的文档。由于在这种情况下没有“对与错”，所以你可以选择最适合你的答案。
1
@Mehrdad：我理解，但答案仍然成立。我唯一要补充的是，在印刷世界中，点是有效的度量单位，因为页面和字体大小是静态的，但在动态的Web世界中则不太有效。 - George Cummins
@Geroge Cummins 我仍然不明白像素和点之间的区别是什么 :( 在这两种情况下，它们都被映射到某个定义好的 -- 并且每页恒定的 -- 比例尺。 - user166390
1
@pst：像素是计算机特定的度量单位。每个显示器/屏幕都有一定数量的像素可以显示。另一方面，点是尺寸的度量（通常每英寸有72个点）。物理尺寸的度量在比较4英寸手机屏幕或22英寸桌面监视器上的网站时无法很好地转换。 - George Cummins
@Geroge Cummins，一个75DPI 15英寸的像素与我的150DPI 15英寸的像素也不同...屏幕尺寸和DPI是独立的（即使DPI仍然在相对固定的范围内）--实际上，iPhone 4的DPI超过300。 - user166390
@pst：打印机（和操作系统）内置的字体以“点”为单位进行大小调整。显示器使用“像素”呈现屏幕内容。 - Sparky
0

我几乎在所有地方都使用像素。

对我来说，这样做感觉更加精确控制。

对于那些需要随着窗口动态调整大小的少数元素，我使用百分比。

编辑：

什么是“em”？

@Mehrdad：据我所知，点通常用于字体和打印的上下文中。请参阅我的编辑以了解“em”的解释。 - Sparky
@pst：这与分数无关。很抱歉你没有理解。 - Sparky
@Sparky672 我想要“明白”。你的回答中哪里提到了“点数”？（谈论“em”并没有回答这个问题。） - user166390
@pst：请再次阅读原帖的问题。我的答案没有涉及到“点数”，因为回答这个问题并不需要它。他问的是“像素还是点数？”以及各自的优缺点。提到“EM”是直接回应原帖作者的评论，“什么是EM？” - Sparky
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接