像素与HTML / CSS中的点数

Question

在创建HTML页面时，我应该指定像带有像素的margin或带有CSS的点吗？

其中一个被认为是比另一个更好的做法吗？ 任何一个的优点或缺点？

Answer 1

使用px或em

• CSS FONT-SIZE：EM VS. PX VS. PT VS. 百分

点数（pt）：传统上在打印介质中使用的点（任何要在纸上打印的东西等）。 一点等于1/72英寸。 点很像像素，因为它们是固定大小的单位，不能缩放。

通常， 1em = 12pt = 16px = 100％。

[结论]

获胜者：百分比（％）。

• JohnB注意： 这是针对TEXT的。 显然你问的是“像利润这样的东西”。 （我假设你的意思是padding 。）为此，我会推荐px或em 。 就个人而言，我会根据具体情况进行切换。

更多文章

• px - em - ％ - pt - 关键字

点值仅适用于打印CSS！

（进一步评论）

积分是否适合打印？ 不。

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

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

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

也：

• CSS：比较字体大小，百分比，Em，Point和Pixel

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让你完全放弃了这个人在浏览器中定义字体大小的方式。 Ems和百分比使其变得简单。 我总是使用积分。

[...]

不， 积分不是最好的 。 对于找到这个帖子的人，忘记你曾经读过这个帖子。 这是一个网页设计论坛。 用于在屏幕媒体上显示页面。 CSS中包含的点仅用于打印设计。 用于打印介质样式表。 它们不像％和ems那样可扩展 。 如果您是任何类型的网页设计师，您应该努力使您的网页可访问，并且使用积分是针对顶部的权利。

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

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

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

更多信息

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

不要以pt为单位指定font-size，也不要为屏幕样式表指定其他绝对长度单位。 它们在不同平台上呈现不一致，并且无法由用户代理（例如浏览器）调整大小。 在具有固定和已知物理属性（例如打印）的介质上保留此类单元的样式用于样式 。

Answer 4

John B的上述答案是最好和最准确的。 我只是想指出他上面的答案可能造成的混乱。 排版中的“em”是您选择的字体中字母“m”的宽度。 要指定字体的高度，打印机/排字机使用“x height”，这是字体的小写字母x的高度。

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

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

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

文档中的所有内容都将相对于您的初始设置进行缩放，以100p字体大小为16px。 这样，您只需在文档中使用一次像素测量。 如果您以后想要设置媒体查询以调整大小和边距以适应不同设备显示器上的不同像素密度，则此功能非常有用。 您只需要在body标签中查询该初始声明。 其他所有内容都会相对于此调整，不需要更改。

只是一个想法，maxw3st

Answer 5

任何告诉你使用像素的人都是错的 。 像素工作正常，但根本不需要它们......永远！ 积分是指定绝对量度的完美方式，对于我们通常在网络上工作的量表，它们通常不是首选度量。

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

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

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

Answer 6

像素对我来说更美观，我相信它被认为是更好的做法......

Answer 7

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

我发现关键问题是需要用窗口调整距离吗？ 有些单位是相对的，有些单位（如像素和点数）不是 - 这里有一个简短的描述。

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

Answer 8

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

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

Answer 9

几乎所有东西都使用像素。

对我而言，它“感觉”就像我有更精确的控制。

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

编辑：

什么是“em”？