创建HTML页面时,我应该在CSS中指定带有像素或点数的margin
s这样的内容吗?
其中一个被认为比另一个更好吗?任何一方有任何优点或缺点吗?
答案 0 :(得分:34)
使用px
或em
积分(点):积分传统上用于印刷媒体(任何要在纸上打印的东西等)。一点等于1/72英寸。点与像素非常相似,因为它们是固定大小的单位,不能缩放。
通常, 1em = 12pt = 16px = 100%。
[结论]
获胜者:%(%)。
padding
。)为此,我建议px
或em
。就个人而言,我会根据具体情况进行切换。更多文章
点值仅适用于打印CSS!
(进一步评论)
积分是否适合打印?不。强>
积分不适用于打印。从理论上讲,要点是用于定义绝对量度。像素不是绝对的,因为根据您的屏幕和所选择的定义(不是分辨率),分辨率(每英寸像素数)可以从很多(150dpi)或非常小(75dpi)。这意味着您的像素可以是一个大小,也可以是那个大小的一半。这意味着您在屏幕上设计得非常清晰的文字可能在您的客户屏幕上看起来太大(“请将文字缩小,好吗?”)或太小而无法在邻居的屏幕上阅读(“嘿,网站是你前几天告诉我的那个?你说你曾经做过的那个......好吧我读不懂文字,它太小了“)。
积分是解决此问题的方法。但是浏览器和操作系统需要管理它们。基本上,它意味着:
浏览器必须使用给定值(例如10pt)和屏幕的真实分辨率计算显示尺寸(以像素为单位); 操作系统必须传达真实的当前分辨率,而不是默认值。
此外:
答案 1 :(得分:9)
经验法则是:
屏幕显示的像素;打印点。
'em'或'%'(以及鲜为人知的rem
)更适合更灵活的布局。
em
是基于当前字体中字母“m”的大小的度量单位。在em中指定大小允许您根据字体大小设置大小,这意味着您可以更改字体,并且布局将更改为跟随。
但是很多时候你需要使用固定大小。在这种情况下,px
通常是最好的,因为大多数网页都显示在基于像素的屏幕上。但是,如果您计划打印一个页面,那么您可以使用基于点的布局打印特定的样式表。
通常我建议em
超过px
或pt
。如果您使用的是px
,那是因为您的页面上有元素,其大小以像素为单位,如图像所示,您需要使其余的布局符合要求。在这种情况下,因为图像是以像素为单位的,所以样式表也是如此。此外,由于点是打印测量单位,因此无法保证它们将如何显示在屏幕上:px是基于屏幕的,因此可以在屏幕上跨浏览器和跨平台提供更加一致的外观。
顺便说一句,此页面可能会为您提供更多信息:http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
答案 2 :(得分:6)
积分非常棒,因为它们的高度为1/72英寸。你知道你的文字有多高。像素问题是分辨率越高它们越小。 如果您想在背景图片周围包装文字,则效果非常好。需要一些工作,但它可以使一个漂亮的页面。我听说像素在IE中无法调整大小 - 所以如果他们想要增加字体大小,他们就不能。不要使用IE,所以我不能说。记得听到这个。 EM让你完全放弃了这个人在浏览器中定义字体大小的方式。 Ems和百分比使其变得简单。我总是使用积分。
[...]
不,积分不是最好的。对于找到这个帖子的人,忘记你曾经读过这个帖子。这是一个网页设计论坛。用于在屏幕媒体上显示页面。 CSS仅包含在打印设计中。对于打印介质样式表。 它们不能按%和ems 进行扩展。如果您是任何类型的网页设计师,那么您应该努力使您的网页可以访问,并且使用积分是针对顶部的权利。
http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html
很有趣,每个人都回答“像素或%/ em”,而不是“像素或点”。
我不知道两者之间存在差异。
修改:even more info... official ones!
不要为pt 指定字体大小,也不要为屏幕样式表指定其他绝对长度单位。它们在不同平台上呈现不一致,并且不能由用户代理(例如浏览器)调整大小。 在具有固定和已知物理属性的介质(例如打印)上保留此类单位的样式用于样式。
答案 3 :(得分:2)
任何告诉您使用像素的人错误。像素工作正常,但根本不需要它们......永远!积分是指定绝对量度的完美方式,对于我们通常在网络上工作的量表,它们通常不是首选度量。
除了点之外,还有异食癖,英寸,厘米等。选择其中一个比另一个更像是在说,“我应该用英尺或英寸来测量这个房间吗?”让常识成为您的指导。他们都会完成工作。
在某些答案中出现的Em应该在适当的时候保留。也就是说,“当这个东西缩放时,我希望这个其他东西可以扩展”。这就是相对措施的目的。我知道这是你原来问题的范围,但我不得不解决一些关于“总是使用em”的废话。 BTW,像素不等于物理像素。今天,样式表中的px表示1/96英寸。这就是为什么我说不要使用它们。大多数人都不知道这一点。他们使用他们认为他们指定实际像素。我不能认真地对待这些人(虽然我不怪人,但我责怪事物状态的混乱性质,这就是为什么我要争取像素消失的原因。)。此外,如果像素真的意味着像素,那么它们就是指定尺寸的可怕方式。谈论事物将根据无法控制的任意屏幕分辨率随机缩小和增长的事实。哎呀!远离像素!!!在实践中它们可以工作,但这只是因为浏览器制造商和操作系统人员的不可思议的努力,理论上它们是指定你的意图的一种非常模糊的方式。答案 4 :(得分:2)
John B的上述答案是最好和最准确的。我只是想指出他上面的答案可能造成的混乱。一个" em"在排版中是字母的宽度" m"用你选择的字体。要指定字体的高度,打印机/排字机使用" x height&#34 ;,这是字体小写x的高度。
正如约翰所指出的,pt是一个固定的度量单位,等于1/72英寸。由于显示器具有不同的像素密度(72 /英寸,96 /英寸......),因此通常不是在HTML文档中调整大小的好方法。
em直接与旧的排版单位相关,并且是一个很好的相对衡量标准。随着屏幕尺寸的缩放,字体大小随之缩放。如果你使用em作为边距,它们会相对于你的字体大小进行缩放,这通常是一件好事。
但是,对于边距,填充和所有与字体无直接关系的东西,最好使用rem,或者#34; relative ems"。最好的方法是首先声明身体或html标签的默认字体大小。像body-size = 16px之类的东西是一个很好的起点。然后文档中的其他地方都使用em来表示文本,而rem则用于其他所有内容。或者,使用百分比。两者都可以正常工作。与em和rem一样,你的%相对于原始的16px = 100%的字体大小。
文档中的所有内容都将相对于您的初始设置进行缩放,即100p字体大小为16px。这样,您只需在文档中使用一次像素测量。如果您以后想要设置媒体查询以调整大小和边距以适应不同设备显示器上的不同像素密度,则此功能非常有用。您只需要在body标签中查询该初始声明。其他一切都会相对于此调整,不需要改变。
只是一个想法, maxw3st答案 5 :(得分:1)
像素对我来说更美观,我相信它被认为是更好的做法......
答案 6 :(得分:1)
我认为这取决于你想要做什么。
我发现关键问题是需要用窗口调整距离吗?有些单位是相对的,有些单位(如像素和点数)不是 - 简要说明是here。
我没有看到使用过多的点,当需要绝对测量时,px似乎更常见。
答案 7 :(得分:0)
答案是:这取决于。你用什么利润?它们是平衡,可调整大小的布局的集成部分,还是只是在边缘提供了一条排水沟?在第一种情况下,百分比效果更好,而在第二种情况下像素效果很好。
您应该尝试不同的可能性并确定哪种方法最适合您的文档。由于在这种情况下没有“对与错”,您可以选择最适合您的答案。
答案 8 :(得分:0)