HTML/CSS 中的像素与点

Question

创建 HTML 页面时，我应该使用像素或 CSS 中的点来指定诸如 margin 之类的内容吗？

其中一种做法是否被认为比另一种更好？两者有何优点或缺点？

Answer 1

使用px或em

• CSS 字体大小：EM VS. PX VS。 PT VS。百分比

点 (pt)：点传统上用于打印介质（任何要打印在纸张上的内容等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位并且不能缩放大小。

一般来说，1em = 12pt = 16px = 100%。

[结论]

获胜者：百分比 (%)。

• JohnB 注意：这是针对文本的。显然您问的是“诸如边距之类的东西”。 （我假设您也指的是 padding。）为此，我建议使用 px 或 em。就我个人而言，我会根据具体情况进行切换。

更多文章

• px – em – % – pt – 关键字

点值仅适用于打印 CSS！

（进一步评论）

积分可以打印吗？不。

积分并非专门用于打印。理论上，点是用来定义绝对度量的。像素不是绝对的，因为根据您的屏幕和选择的清晰度（不是分辨率），分辨率（每英寸像素）可以很大（150dpi）或很小（75dpi）。这意味着您的像素可以是一个大小，也可以是该大小的一半。这意味着您设计的在屏幕上完全清晰的文本可能在您客户的屏幕上看起来太大（“请将文本变小，好吗？”）或太小而无法在您邻居的屏幕上阅读（“嘿，您的网站”）。告诉我前几天的事吗？你说你已经写过的那个……好吧，我无法很好地阅读文本，它太小了”）。

积分是这个问题的解决方案。但浏览器和操作系统需要管理这些。基本上，这意味着：

浏览器必须使用给定值（例如 10pt）和屏幕的实际分辨率来计算显示尺寸（以像素为单位）；
操作系统必须传达当前的实际分辨率，而不是默认值。

另外：

• CSS：比较字体大小、百分比、Em、Point 和像素

Answer 2

经验法则是：

屏幕显示的像素；打印点。

'em' 或 '%'（以及鲜为人知的 rem）更适合更灵活的布局。

em 是基于当前字体中字母“m”的大小的度量单位。以 em 为单位指定大小可以让您根据字体大小确定大小，这意味着您可以更改字体，并且布局也会随之更改。

但很多时候您需要使用固定大小。在这种情况下，px 通常是最好的，因为大多数网页都显示在基于像素的屏幕上。但是，如果您计划有一个需要大量打印的页面，那么您可以使用具有基于点的布局的特定于打印的样式表。

一般来说，我会推荐使用 em 而不是 px 或 pt。如果您使用 px，这是因为页面上的元素大小以像素为单位（例如图像），您需要布局的其余部分符合这些元素。在这种情况下，因为图像以像素为单位，所以样式表也应该以像素为单位。此外，由于点是打印测量单位，因此无法保证它们将如何显示在屏幕上：px 是基于屏幕的，因此将为您提供跨浏览器和跨平台的屏幕上更加一致的外观。

顺便说一句，此页面可能会为您提供一些进一步的信息：http://webdesign。 about.com/cs/typemeasurements/a/aa042803a.htm

Answer 3

点非常好，因为它们的高度为 1/72 英寸。您知道您的文字有多高。像素的问题在于，分辨率越高，像素就越小。 如果您想将文本环绕在背景图片周围，像素非常有用。需要一些工作，但它可以制作出漂亮的页面。我听说 IE 中的像素不能调整大小 - 所以如果他们想增加字体大小，他们不能。不用IE，所以不好说。记得听到过这句话。 EM 让您受制于人们如何在浏览器中定义字体大小。 Em 和百分比让这一切变得简单。我总是使用积分。

[...]

不，积分并不是最好的。对于任何找到此主题的人，请忘记您曾经读过该主题。这是一个网页设计论坛。用于在屏幕媒体上显示页面。 CSS 中包含点仅用于打印设计的目的。对于印刷媒体样式表。 它们不能像 % 和 ems 那样进行缩放。如果您是任何类型的网页设计师，您应该努力使您的页面易于访问，而使用点是对这一点的直接打击。

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

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

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

更多信息

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

请勿以 pt 为单位指定字体大小，或屏幕样式表的其他绝对长度单位。它们在不同平台上呈现不一致，并且无法由用户代理（例如浏览器）调整大小。 在具有固定和已知物理属性（例如打印）的媒体上继续使用此类单位进行样式设置。

Answer 4

任何告诉您使用像素的人都是错误的。像素工作正常，但它们根本不是必需的......永远！点是指定绝对度量的完美方式，并且对于我们在网络上通常使用的规模来说，它们通常不是首选度量。

除了点之外，还有异食癖、英寸、厘米等。选择其中一个而不是另一个很像在说“我应该用英尺还是英寸来测量这个房间？”让常识成为您的指南。他们都会完成工作。

Em，在一些答案中出现，应该在适当的时候保留。也就是说，“当这个东西扩展时，我希望另一个东西扩展”。这就是相对措施的目的。我知道这超出了你原来问题的范围，但我不得不解决一些关于“总是使用 em”的废话。

顺便说一句，像素不等于物理像素。如今，样式表中的 px 表示 1/96 英寸。这就是为什么我说不要使用它们。大多数人不知道这一点。他们使用它们时认为他们正在指定实际像素。我不能认真对待这些人，因为这是显而易见的（虽然我不责怪这些人，但我责怪事物状态的令人困惑的本质，这就是为什么我呼吁像素消失。）。此外，如果像素真的意味着像素，那么它们将是一种可怕的指定尺寸的方式。谈论这样一个事实：事物会根据无法控制的任意屏幕分辨率随机缩小和增长。哎呀！远离像素！！！在实践中它们是有效的，但只是由于浏览器制造商和操作系统人员捏造了看不见的努力，理论上它们是一种非常模糊的方式来指定你的意图。

Answer 5

上面约翰 B 的回答是最好、最准确的。我只是想指出他上面的答案可能造成的混乱。排版中的“em”是您选择的字体中字母“m”的宽度。为了指定字体的高度，打印机/排字机使用“x 高度”，即字体的小写 x 的高度。

正如 John 指出的那样，pt 是固定的测量单位，等于 1/72 英寸。由于显示器具有不同的像素密度（72/英寸、96/英寸...），因此通常不是在 HTML 文档中调整内容大小的好方法。

em 与旧的排版单位直接相关，并且是一个很好的相对度量。当屏幕尺寸缩放时，字体大小也会随之缩放。如果您使用 em 作为边距，它们会根据您的字体大小进行缩放，这通常是一件好事。

但是，对于边距、填充和所有与字体不直接相关的内容，最好使用 rem 或“相对 ems”。最好的方法是首先为您的 body 或 html 标记声明默认字体大小。像 body font-size = 16px 这样的东西是一个很好的起点。然后文档中的其他地方使用 em 表示文本，使用 rem 表示其他所有内容。或者，使用百分比。两者都可以正常工作。与 em 和 rem 一样，您的 % 是相对于原始 16px = 100% 字体大小的。

文档中的所有内容都将相对于 100% 字体大小（16 像素）的初始设置进行缩放。这样，您只需在文档中使用一次像素测量。如果您稍后想要设置媒体查询来调整大小和边距以适应不同设备显示器上的不同像素密度，这会派上用场。您只需查询 body 标记中的一个初始声明即可。其他一切都会相应调整，不需要改变。

只是一个想法，
最大宽度3st

Answer 6

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

我发现关键问题是距离是否需要随窗口调整大小？有些单位是相对的，有些（如像素和点）不是 - 简要说明是 在这里。

我还没有看到太多使用的点，当需要绝对测量时， px 似乎更常见。

Answer 7

答案是：视情况而定。你用你的利润做什么？它们是平衡的、可调整大小的布局的一个组成部分，还是只是在边缘提供了一个排水沟？在第一种情况下百分比效果更好，在第二种情况下像素效果更好。

您应该尝试不同的可能性并确定哪种最适合您的文档。由于在这种情况下没有“对与错”，因此您可以选择最适合您的答案。

Answer 8

我几乎所有事情都使用像素。

对我来说，“感觉”我有更精确的控制。

对于一些需要随窗口动态调整大小的内容，我使用百分比。

编辑：

什么是“em”？