50

创建 HTML 页面时,我应该margin用像素或 CSS 中的点来指定诸如 s 之类的东西吗?

其中一个被认为比另一个更好吗?任何一个都有优点或缺点吗?

4

9 回答 9

35

使用pxem

点 (pt):点传统上用于印刷媒体(任何要打印在纸上的东西等)。一点等于 1/72 英寸。点很像像素,因为它们是固定大小的单位,不能按大小缩放。

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

[结论]

获胜者:百分比 (%)。

  • JohnB 注意:这是用于TEXT。 显然你问的是“像边距这样的事情”。(我假设你的意思padding也是。)为此,我会推荐pxor em。就个人而言,我会根据具体情况进行切换。

更多文章

点值仅用于打印 CSS!

(进一步向下评论)

积分是用来打印的吗?没有。

积分不是专门用于打印的。从理论上讲,点用于定义绝对度量。像素不是绝对的,因为根据您的屏幕和选择的清晰度(不是分辨率),分辨率(每英寸像素数)可能很大(150dpi)或很小(75dpi)。这意味着您的像素可以是一个大小,或者可能是那个大小的一半。这意味着您设计的在屏幕上清晰易读的文本可能在您客户的屏幕上看起来太大(“请让文本更小,好吗?”)或太小而无法在您邻居的屏幕上阅读(“嘿,您的网站前几天告诉我的?你说你做过的那个……好吧,我看不懂文字,它太小了”)。

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

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

还:

于 2011-06-17T18:31:14.693 回答
10

经验法则是:

屏幕显示像素;打印点。

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

em是基于当前字体中字母“m”大小的度量单位。在 em 中指定大小可以让您拥有基于字体大小的大小,这意味着您可以更改字体,并且布局将随之更改。

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

一般来说,我会推荐emover pxor pt。如果您使用的是px,那是因为您的页面上有以像素为单位的元素(例如图像),您需要布局的其余部分来符合这些元素。在这种情况下,因为图像以像素为单位,所以样式表也应如此。此外,由于点是一种打印计量单位,因此无法保证它们在屏幕上的显示方式:px 是基于屏幕的,因此在跨浏览器和跨平台时会给您提供更加一致的屏幕外观。

顺便说一句,此页面可能会为您提供更多信息:http ://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

于 2011-06-17T18:17:21.347 回答
6

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

[...]

不,分数不是最好的。对于找到此线程的任何人,请忘记您曾经阅读过该主题。这是一个网页设计论坛。用于在屏幕媒体上显示页面。CSS 中包含的点仅用于印刷设计。用于打印媒体样式表。 它们不像 % 和 ems 那样可扩展。如果您是任何类型的网页设计师,您应该努力使您的页面易于访问,并且使用积分是对顶部的打击。

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

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

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

更多信息

编辑:更多信息......官方信息!

不要在 pt 中指定字体大小或屏幕样式表的其他绝对长度单位。它们在平台之间呈现不一致,并且不能由用户代理(例如浏览器)调整大小。在具有固定和已知物理属性(例如打印)的媒体上保持使用此类单元进行样式设置

于 2011-06-17T18:19:53.507 回答
3

任何告诉你使用像素的人都是错误的。像素工作正常,但它们根本不是必需的......永远!点是指定绝对度量的完美方式,对于我们通常在网络上使用的比例,它们通常不是首选度量。

除了点之外,还有皮卡、英寸、厘米等。选择其中一个而不是另一个就像是在说:“我应该用英尺还是英寸来衡量这个房间?” 让常识成为你的向导。他们都会完成工作。

在某些答案中出现的 Em 应保留在适当的时候使用。也就是说,“当这个东西扩展时,我希望另一个东西扩展”。这就是相对措施的用途。我知道这超出了您最初问题的范围,但我必须解决一些关于“始终使用 em”的废话。

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

于 2011-10-09T07:44:47.657 回答
2

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

正如约翰指出的那样,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 标记中的那个初始声明。其他一切都会相对于此进行调整,并且不需要更改。

只是一个想法,maxw3st

于 2012-09-29T01:41:26.163 回答
1

像素对我来说更美观,我相信它被认为是更好的实践......

于 2011-06-17T18:11:00.333 回答
1

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

我发现关键问题是距离需要随窗口调整大小吗?有些单位是相对的,有些(如像素和点)不是——这里有一个简短的描述。

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

于 2011-06-17T18:11:57.383 回答
0

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

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

于 2011-06-17T18:14:04.310 回答
0

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

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

对于我需要随窗口动态调整大小的几件事,我使用百分比。

编辑:

什么是“他们”?

于 2011-06-17T18:14:24.410 回答