HTML/CSS 中的像素与点

Pixels vs. Points in HTML/CSS

提问by user541686

When creating an HTML page, should I specify things like margins with pixels or with points in CSS?

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

Is one of them considered to be better practice than the other? Any advantages or disadvantages to either one?

他们中的一个被认为比另一个更好吗？任何一种都有什么优点或缺点？

采纳答案by JohnB

Use pxor em

使用px或em

• CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

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

Points (pt):Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

Generally, 1em = 12pt = 16px = 100%.

[Conclusion]

The winner:percent (%).

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

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

[结论]

获胜者：百分比 (%)。

• JohnB note: this is for TEXT.Obviously you asked about "things like margins." (I assume you mean paddingalso.) For that, I would recommend pxor em. Personally, I switch, depending on the particular situation.

• JohnB 注意：这是用于文本的。显然你问的是“像边距这样的事情”。（我想你的意思padding也是。）为此，我会推荐px或em。就个人而言，我会根据特定情况进行切换。

MORE ARTICLES

更多文章

• px – em – % – pt – keyword

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

Point values are only for print CSS!

点值仅用于打印 CSS！

(Comment further down)

（往下评论）

Points are for print? Nope.

Points are not for print exclusively. Theoretically, points are for defining an absolute measure. Pixels are not absolute, since depending on your screen and chosen definition (not resolution), the resolution (pixels per inch) can go from a lot (150dpi) or very little (75dpi). Which means your pixels can be a size, or maybe half that size. Which means that text you design to be perfectly legible on your screen may look too big on your client's screen (“please make the text smaller, ok?”) or too small to be readable on your neighbor's screen (“hey, the website you told me about the other day? the one you said you had worked on… well i couldn't read the text very well, it's so small”).

Points are a solution to this issue. But browsers and operating systems need to manage those. Basically, it means:

browsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen's real resolution; operating systems have to communicate the real current resolution, and not a default value.

积分是用来打印的吗？不。

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

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

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

Also:

还：

• CSS: Comparing Font Size, Percentage, Em, Point, and Pixel

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

回答by Spudley

The rules of thumb is:

经验法则是：

Pixels for screen display; points for printing.

屏幕显示像素；打印点。

'em' or '%' (and the lesser known rem) are better for a more flexible layout.

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

emis a unit of measure based on the size of the letter 'm' in the current font. Specifying sizes in em allows you to have a size based on the font size, meaning that you can change the font, and the layout will change to follow suit.

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

But there are plenty of times when you need to use a fixed size. In that case, pxis usually going to be best, as most web pages are displayed on a pixel-based screen. But if you're planning to have a page which is printed a lot, then you could have a print-specific stylesheet with a point-based layout.

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

Generally I'd recommend emover pxor pt. If you're using px, it is because you have elements on your page which are sized in pixels such as images, which you need the rest of the layout to conform to. In this case, because the images are in pixels, so should the stylesheets. In addition, because points are a printing unit of measure, there's no guarantee how they'll appear on the screen: px is screen-based, so will give you a much more consistent look on-screen cross-browser and cross-platform.

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

By the way, this page might give you some further info: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

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

回答by Kraz

Points are great since they are 1/72 inch tall. You know how tall your text will be. Problem with pixels is that they get smaller the higher the resolution. Pixels are great if you want to wrap text around a background picture. Takes some work but it can make a nice looking page. I have heard that pixels are not resizable in IE - so if they want to increase the font size they can't. Don't use IE, so I can't say. Remember hearing that. EM's leave you at the mercy of how the person has that defined font sizes in their browser. Ems and percentages make it easy. I always use points.

[...]

No, points are not the best. To anyone who finds this thread, forget that you ever read that. This is a web design forum. For displaying pages on screen media. Points are included in CSS solely for the purpose of print design. For print media stylesheets.They are not scalable as % and ems are. If you are any sort of web designer you should be working to make your pages accessible and using points is a strike against that right off the top.

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

[...]

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

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

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

It's funny, everyone answer "pixel or %/em" and not "pixel or points".

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

I didn't know there was a difference between both.

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

more info

更多信息

Edit : even more info... official ones!

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

Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).

不要在 pt或其他屏幕样式表的绝对长度单位中指定字体大小。它们跨平台呈现不一致，并且不能由用户代理（例如浏览器）调整大小。在具有固定和已知物理属性（例如印刷品）的媒体上保持使用此类单位来设计样式。

回答by Blake Taylor

Anybody who tells you to use pixels is wrong. Pixels work fine, but they are simply not required... Ever! Points are a perfectly fine way to specify an absolute measure, and for the scale we are commonly working at on the web they are more often then not the preferred measure.

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

Beside points, there is also pica, inch, centimeter and so forth. Choosing one of these over the other is a lot like saying, "should I measure this room in feet or inches?" Let common sense be your guide. They'll all get the job done.

除了点，还有皮卡、英寸、厘米等。选择其中之一就像在说，“我应该以英尺还是英寸来衡量这个房间？” 让常识成为您的指南。他们都会完成工作。

Em, which came up in some of the answers, should be reserved for when it's appropriate. That is to say, "when this thing scales, I want this other thing to scale". That's what relative measures are for. I know that is beyound the scope of your original question, but I had to address some of the nonsense about "always using em".

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

BTW, pixels don't equal physical pixels. Today, px in a stylesheet means 1/96th of an inch. This is why I say don't use them. Most people don't know this. They use them thinking they're specifying actual pixels. I can't take these people seriously with this being apparent (Although I don't blame the people, I blame the confusing nature of the state of things which is why I campaign for pixels to disappear.). Furthermore, if pixels really meant pixels, they'd be a horrible way to specify dimensions. Talk about the fact that things would randomly shrink and grow based on uncontrollable arbitrary screen resolutions. Yikes! Stay away from pixels!!! In practice they work, but only due to fudging an unseen efforts on the part of browser makers and OS folks, in theory they're a horribly ambiguous way of specifying your intentions.

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

回答by Max West

John B's answer above is the best and most accurate. I just wanted to point out a possible confusion created by the answer above his. An "em" in typography is the width of the letter "m" in the font that you've chosen. To specify height for a font, printers/typesetters used the "x height", which is the height of the lower case x for a font.

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

As John points out, pt's are a fixed unit of measure equal to 1/72nd of an inch. Since monitors have varying pixel densities (72/inch, 96/inch...) it isn't generally a good way to size things in HTML docs.

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

The em relates directly to the old typography unit and makes an excellent relative measure. As your screen size is scaled, the font sizes scale with it. If you use em's for margins, they scale relative to your font sizes, which is generally a good thing.

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

But, for margins, padding and all things not directly font related, it's best to use rem's, or "relative ems". The best way to do this is declare a default font size for your body or html tag initially. Something like body font-size = 16px is a good place to start. Then everywhere else in the document use em's for text, and rem's for everything else. Or, use percentages. Either will work fine. Like em's and rem's, your % is relative to that original 16px = 100% font size.

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

Everything in the document will scale relative to your initial setting for your 100% font size at 16px. That way you only use a pixel measurement once in the document. This comes in handy if you later want to set media queries to adjust your sizes and margins to accommodate different pixel densities across different device displays. You only have to have queries for that one initial declaration in the body tag. Everything else will adjust relative to that and won't need to be changed.

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

just a thought, maxw3st

只是一个想法，maxw3st

回答by Teak

Pixels is more aesthetic for me, and I believe it's considered better practice...

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

回答by brabster

I think it depends on what you're trying to do.

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

I find the key question is does the distance need to resize with the window? Some units are relative, some (like pixels and points) are not - a brief description is here.

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

I haven't seen points used much, px seems more common when an absolute measurement is needed.

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

回答by George Cummins

The answer is: It depends. What are you using your margins for? Are they an integrated part of a balanced, resizable layout, or do they just provide a gutter around the edges? Percentages work better in the first case, and pixels work well in the second.

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

You should try the different possibilities and determine which works best for your document. Since there is no "right and wrong" in this case, you can choose the answer that works best for you.

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

回答by Sparky

I use pixels for nearly everything.

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

For me, it "feels" like I have more precise control.

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

For the few things that I need to dynamically resize with the window, I use percent.

对于我需要随窗口动态调整大小的少数事情，我使用了百分比。

EDIT:

编辑：

What is "em"?

什么是“em”？