我应该在CSS中使用px或rem值单位吗?

时间：2022-09-10 23:19:17

I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts and elements, but am unable to find a conclusive answer.

我正在设计一个新网站，我希望它能与尽可能多的浏览器和浏览器设置兼容。我正在尝试决定我的字体和元素的大小应该使用什么度量单位，但是我找不到一个确定的答案。

My question is: should I use px or rem in my CSS?

我的问题是:我应该在CSS中使用px还是rem ?

  • So far I know that using px isn't compatible with users who adjust their base font size in their browser.
  • 到目前为止，我知道使用px与在浏览器中调整其基本字体大小的用户不兼容。
  • I've disregarded ems because they are more of a hassle to maintain, compared to rems, as they cascade.
  • 我忽略了ems，因为与rems相比，它们更容易维护。
  • Some say that rems are resolution independent and therefore more desirable. But others say that most modern browsers zoom all elements equally anyway, so using px is not a problem.
  • 有人说rems是独立的，因此更可取。但也有人说，大多数现代浏览器无论如何都会对所有元素进行缩放，因此使用px不是问题。

I'm asking this because there are a lot of different opinions as to what is the most desirable measure of distance in CSS, and I am not sure which is best.

我问这个问题是因为关于CSS中最理想的距离度量有很多不同的观点，我不确定哪种是最好的。

10 个解决方案

#1

364  

TL;DR: use px.

TL;博士:使用px。

The Facts

  • First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.

    首先，非常重要的是要知道，根据每个规范，CSS px单元并不等于一个物理显示像素。即使在1996年的CSS 1规范中也是如此。

    CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.

    CSS定义了参考像素，它测量了一个像素在96 dpi显示器上的大小。在一个dpi与96dpi(如Retina display)有本质区别的显示器上，用户代理将px单元重新展开，使其大小与参考像素的大小相匹配。换句话说，这就是为什么1个CSS像素等于2个物理视网膜显示像素的原因。

    That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.

    也就是说，直到2010年(尽管有移动缩放的情况)，px几乎总是等于一个物理像素，因为所有广泛使用的显示器都在96dpi左右。

  • Sizes specified in ems are relative to the parent element. This leads to the em's "compounding problem" where nested elements get progressively larger or smaller. For example:

    ems中指定的大小相对于父元素。这导致了em的“复合问题”，嵌套元素逐渐增大或减小。例如:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Gives us:

    给我们:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • The CSS3 rem, which is always relative only to the root html element, is too new to rely on. As of July 2012, around 75% of all browsers in use support the rem.

    CSS3快速眼动(rem)始终只与根html元素相关，它太新了，不值得依赖。截至2012年7月，大约75%的浏览器都支持快速眼动。

The Opinion

I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.

我想每个人都同意，设计你的页面是为了迎合每个人，并考虑到视障人士。这样的考虑之一(但不是唯一的一个!)是允许用户使你的网站的文本更大，以便更容易阅读。

In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn't scale when changing the browser's font size option.

在一开始，为用户提供一种扩展文本大小的方法的唯一方法是使用相对大小的单元(比如ems)。这是因为浏览器的字体大小菜单仅仅改变了根字体大小。因此，如果您在px中指定字体大小，那么当您更改浏览器的字体大小选项时，它们不会伸缩。

Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.

现代的浏览器(甚至是不那么现代的IE7)都改变了默认的缩放方法，将所有的东西放大，包括图像和盒子大小。本质上，它们使参考像素变得更大或更小。

Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).

是的，有些人仍然可以更改浏览器默认样式表来调整默认字体大小(相当于旧式字体大小选项)，但这是一种非常深奥的方式，我敢打赌nobody1会这么做。(在Chrome中，它被隐藏在高级设置、网页内容和字体大小之下。在IE9中，它更加隐蔽。你必须按Alt键，然后点击查看，文本大小。只需在浏览器的主菜单中选择Zoom选项(或者使用Ctrl++/-/鼠标滚轮)就容易得多。

1 - within statistical error, naturally

1 -在统计误差范围内，自然。

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)

如果我们假设大多数用户使用zoom选项缩放页面，那么我发现相对单位几乎是不相关的。当所有内容都在同一个单元中指定时(图像都是用像素处理的)，开发页面要容易得多，而且您不必担心复合。(“我被告知不会有数学运算”——需要计算出1.5em到底是用来做什么的。)

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.

另一个可能的问题是，只对字体大小使用相对单位，用户调整字体大小可能会打破布局的假设。例如，这可能导致文本被剪切或运行太长。如果您使用的是绝对单位，您就不必担心会破坏布局的意外字体大小。

So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use ems anyway.

我的答案是使用像素单位。我什么都用px。当然，您的情况可能会有所不同，如果您必须支持IE6(希望RFCs的诸神怜悯您)，那么无论如何您都必须使用ems。

#2

79  

I would like to praise josh3736's answer for providing some excellent historical context. While it's well articulated, the CSS landscape has changed in the almost five years since this question was asked. When this question was asked, px was the correct answer, but that no longer holds true today.

我想赞扬josh3736提供了一些优秀的历史背景。虽然这个问题得到了很好的阐述，但自从这个问题被提出以来，CSS的面貌已经发生了近5年的变化。当这个问题被提出时，px是正确的答案，但这在今天已经不成立了。

tl;dr: use rem

tl;博士:使用快速眼动

Unit Overview

Historically px units typically represented one device pixel. With devices having higher and higher pixel density this no longer holds for many devices, such as with Apple's Retina Display.

在历史上，px单位通常代表一个设备像素。随着设备具有越来越高的像素密度，这不再适用于许多设备，比如苹果的视网膜显示屏。

rem units represent the root em size. It's the font-size of whatever matches :root. In the case of HTML, it's the <html> element; for SVG, it's the <svg> element. The default font-size in every browser* is 16px.

快速眼动单位表示em的根尺寸。它是任何匹配的字体大小:根。在HTML中，它是< HTML >元素;对于SVG，它是< SVG >元素。每个浏览器的默认字体大小是16px。

At the time of writing, rem is supported by approximately 98% of users. If you're worried about that other 2%, I'll remind you that media queries are also supported by approximately 98% of users.

在撰写本文时，rem得到了大约98%的用户的支持。如果您担心另外2%，我将提醒您，大约98%的用户也支持媒体查询。

On Using px

The majority of CSS examples on the internet use px values because they were the de-facto standard. pt, in and a variety of other units could have been used in theory, but they didn't handle small values well as you'd quickly need to resort to fractions, which were longer to type, and harder to reason about.

internet上大多数CSS示例都使用px值，因为它们是事实上的标准。pt, in和其他很多单位都可以在理论上使用，但是他们没有处理小的值，因为你很快需要用到分数，这是更长的类型，更难以解释。

If you wanted a thin border, with px you could use 1px, with pt you'd need to use 0.75pt for consistent results, and that's just not very convenient.

如果你想要一个细边框，你可以用1px，用pt你需要用0.75pt来得到一致的结果，这不是很方便。

On Using rem

rem's default value of 16px isn't a very strong argument for its use. Writing 0.0625rem is worse than writing 0.75pt, so why would anyone use rem?

rem的默认值是16px，这并不是使用它的有力论据。写0.0625rem比写0.75pt还要糟糕，为什么有人要用rem?

There are two parts to rem's advantage over other units.

快速眼动的优势有两个方面。

  • User preferences are respected
  • 尊重用户首选项
  • You can change the apparent px value of rem to whatever you'd like
  • 你可以将快速眼动的像素值改变为你想要的。

Respecting User Preferences

Browser zoom has changed a lot over the years. Historically many browsers would only scale up font-size, but that changed pretty rapidly when websites realized that their beautiful pixel-perfect designs were breaking any time someone zoomed in or out. At this point, browsers scale the entire page, so font-based zooming is out of the picture.

多年来，浏览器的缩放改变了很多。历史上，很多浏览器只会放大字体大小，但当网站意识到自己漂亮的像素设计在用户放大或缩小时就会崩溃时，情况就发生了很大的变化。此时，浏览器会扩展整个页面，因此基于字体的缩放不在考虑范围之内。

Respecting a user's wishes is not out of the picture. Just because a browser is set to 16px by default, doesn't mean any user can't change their preferences to 24px or 32px to correct for bad vision. If you base your units off of rem, any user at a higher font-size will see a proportionally larger site. Borders will be bigger, padding will be bigger, margins will be bigger, everything will scale up fluidly.

尊重用户的意愿是不可能的。仅仅因为浏览器默认设置为16px，并不意味着任何用户不能将他们的首选项更改为24px或32px，以纠正错误的视觉效果。如果你把你的单位建立在快速眼动的基础上，任何用户在一个更高的字体大小将看到一个比例更大的网站。边界会更大，填充会更大，边缘会更大，所有的东西都将变得流畅。

If you base your media queries on rem, you can also make sure that the site your users see fits their screen. A user with font-size set to 32px on a 640px wide browser, will effectively be seeing your site as shown to a user at 16px on a 320px wide browser. There's absolutely no loss for RWD in using rem.

如果你的媒体查询是基于rem，你还可以确保你的用户看到的网站适合他们的屏幕。在一个640px的浏览器中，一个字体大小设置为32px的用户，在一个320px的浏览器中，会看到一个16px的用户。在使用rem期间，RWD绝对没有损失。

Changing Apparent px Value

Because rem is based on the font-size of the :root node, if you want to change what 1rem represents, all you have to do is change the font-size:

因为rem是基于:根节点的字体大小，如果你想要改变1rem的表示，你所要做的就是改变字体大小:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>

Whatever you do, don't set the :root element's font-size to a px value.

无论如何，不要将:root元素的字体大小设置为px值。

If you set the font-size on html to a px value, you've blown away the user's preferences without a way to get them back.

如果您将html上的字体大小设置为px值，那么您就已经消除了用户的首选项，而无法获得它们。

If you want to change the apparent value of rem, use % units.

如果您想改变rem的视值，请使用% unit。

The math for this is reasonably straight-forward.

这方面的计算相当简单。

The apparent font-size of :root is 16px, but lets say we want to change it to 20px. All we need to do is multiply 16 by some value to get 20.

root的表观字体大小是16px，但是我们想把它改成20px。我们要做的就是用16乘以某个值得到20。

Set up your equation:

设置你的方程:

16 * X = 20

And solve for X:

对X和解决:

X = 20 / 16
X = 1.25
X = 125%


:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>

Doing everything in multiples of 20 isn't all that great, but a common suggestion is to make the apparent size of rem equal to 10px. The magic number for that is 10/16 which is 0.625, or 62.5%.

以20的倍数来做每一件事并不是很好，但是一个常见的建议是让rem的表面大小等于10px。神奇的是10/16 = 0。625，或者说62.5%

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>

The problem now is that your default font-size for the rest of the page is set way too small, but there's a simple fix for that: Set a font-size on body using rem:

现在的问题是，页面其余部分的默认字体大小设置得太小了，但有一个简单的解决方案:使用rem在主体上设置字体大小:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

It's important to note, with this adjustment in place, the apparent value of rem is 10px which means any value you might have written in px can be converted directly to rem by bumping a decimal place.

需要注意的是，有了这个调整，rem的表观值是10px，这就意味着你可能写在px上的任何值都可以直接转换成rem，只需按小数点后一位就可以了。

padding: 20px;

turns into

变成

padding: 2rem;

The apparent font-size you choose is up to you, so if you want there's no reason you can't use:

你选择的字体大小取决于你自己，所以如果你想要，你没有理由不能使用:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

and have 1rem equal 1px.

1rem = 1px。

So there you have it, a simple solution to respect user wishes while also avoiding over-complicating your CSS.

这就是一个简单的解决方案，既可以尊重用户的意愿，又可以避免CSS过于复杂。

Wait, so what's the catch?

I was afraid you might ask that. As much as I'd like to pretend that rem is magic and solves-all-things, there are still some issues of note. Nothing deal-breaking in my opinion, but I'm going to call them out so you can't say I didn't warn you.

我怕你会问。尽管我很想假装rem是魔法和解决一切的方法，但还是有一些值得注意的问题。在我看来没有什么破坏协议的，但是我要把他们叫出来，这样你就不能说我没有警告过你。

Media Queries

One of the first issues you'll run into with rem involves media queries. Consider the following code:

快速眼动的第一个问题涉及到媒体查询。考虑下面的代码:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Here the value of rem changes depending on whether the media-query applies, and the media query depends on the value of rem, so what on earth is going on?

这里，快速眼动的值取决于媒体查询是否适用，而媒体查询取决于快速眼动的值，那么究竟发生了什么呢?

rem in media queries uses the initial value of font-size and does not take into account any changes that may have happened to the font-size of the :root element. In other words, it's apparent value is always 16px.

在媒体查询中，rem使用的是字体大小的初始值，并且没有考虑到可能发生的任何变化:根元素的字体大小。换句话说，它的表观值总是16px。

This is a bit annoying, because it means that you have to do some fractional calculations, but I have found that most common media queries already use values that are multiples of 16.

这有点烦人，因为这意味着您必须做一些小数计算，但是我发现大多数常见的媒体查询已经使用的值是16的倍数。

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

Additionally if you're using a CSS preprocessor, you can use mixins or variables to manage your media queries, which will mask the issue entirely.

此外，如果您使用的是CSS预处理器，您可以使用mixin或变量来管理您的媒体查询，这将完全掩盖问题。

Context Switching

If you switch between projects various different projects, it's quite possible that the apparent font-size of rem will have different values. In one project, you might be using an apparent size of 10px where in another project the apparent size might be 1px. This can be confusing and cause issues.

如果你在不同的项目之间切换，很有可能快速眼动的明显的字体大小会有不同的值。在一个项目中，您可能使用一个10px的外观大小，而在另一个项目中，这个外观大小可能是1px。这可能会让人感到困惑并引发问题。

My only recommendation here is to stick with 62.5% to convert rem to an apparent size of 10px, because that has been more common in my experience.

我在这里唯一的建议是坚持使用62.5%的rem，将其转换为10px的大小，因为在我的经验中这是很常见的。

Shared CSS Libraries

If you're writing CSS that's going to be used on a site that you don't control, such as for an embedded widget, there's really no good way to know what apparent size rem will have. If that's the case, feel free to keep using px.

如果你正在编写的CSS将被用于你不控制的网站，比如一个嵌入式小部件，那么你就没有办法知道什么是明显的快速眼动。如果是这样，可以继续使用px。

If you still want to use rem though, consider releasing a Sass or LESS version of the stylesheet with a variable to override the scaling for the apparent size of rem.

如果您仍然想使用rem，可以考虑发布样式表的Sass或更少版本，并使用一个变量来覆盖对rem大小的缩放。

* I don't want to spook anyone away from using rem, but I haven't been able to officially confirm that every browser uses 16px by default. You see, there are a lot of browsers and it wouldn't be all that hard for one browser to have diverged ever so slightly to, say 15px or 18px. In testing, however I have not seen a single example where a browser using default settings in a system using default settings had any value other than 16px. If you find such an example, please share it with me.

*我不想吓唬任何人不要使用rem，但我还不能正式确认每个浏览器默认使用16px。你看，有很多浏览器，对于一个浏览器来说，它的差异不会那么大，比如15px或18px。在测试中，我还没有看到一个例子，在一个使用默认设置的系统中使用默认设置的浏览器，除了16px之外还有其他值。如果你找到这样的例子，请与我分享。

#3

40  

This article describes pretty well the pros and cons of px, em, and rem.

本文很好地描述了px、em和rem的优缺点。

The author finally concludes that the best method is probably to use both px and rem, declaring px first for older browsers and redeclaring rem for newer browsers:

作者最后得出的结论是，最好的方法可能是同时使用px和rem，在旧的浏览器中先声明px，在新浏览器中重新声明rem:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

#4

7  

As a reflex answer, I would recommend using rem, because it allows you to change the "zoom level" of the whole document at once, if necessary. In some cases, when you want the size to be relative to the parent element, then use em.

作为一种反射性的回答，我建议使用rem，因为它允许您在必要时立即更改整个文档的“缩放级别”。在某些情况下，当您希望大小相对于父元素时，那么使用em。

But rem support is spotty, IE8 needs a polyfill, and Webkit is exhibiting a bug. Moreover, sub-pixel calculation can cause things such as one pixel lines to sometimes disappear. The remedy is to code in pixels for such very small elements. That introduces even more complexity.

但是快速眼动支持不稳定，IE8需要一个多填充，Webkit出现了一个bug。此外，亚像素计算可以导致像一个像素线这样的东西有时消失。补救办法是为如此小的元素编写像素。这就引入了更多的复杂性。

So, overall, ask yourself whether it's worth it - how important and likely it is that you change the "zoom level" of the whole document within CSS?

所以，总的来说，问问自己是否值得这么做——在CSS中更改整个文档的“缩放级别”有多重要，有多可能?

For some cases it's yes, for some cases it'll be no.

在某些情况下是肯定的，在某些情况下是否定的。

So, it depends on your needs, and you have to weight pros and cons, because using rem and em introduces some additional considerations in comparison to the "normal" pixel-based workflow.

因此，这取决于您的需求，您必须权衡利弊，因为使用rem和em比基于“普通”像素的工作流引入了一些额外的考虑。

Keep in mind that it's easy to switch (or rather convert) your CSS from px to rem (JavaScript is another story), because the following two blocks of CSS code would produce the same result:

请记住，将CSS从px转换为rem (JavaScript是另一个故事)很容易，因为接下来的两个CSS代码块会产生相同的结果:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

#5

2  

josh3736's answer is a good one, but to provide a counterpoint 3 years later:

josh3736的答案很好，但三年后提供了一个对比:

I recommend using rem units for fonts, if only because it makes it easier for you, the developer, to change sizes. It's true that users very rarely change the default font size in their browsers, and that modern browser zoom will scale up px units. But what if your boss comes to you and says "don't enlarge the images or icons, but make all the fonts bigger". It's much easier to just change the root font size and let all the other fonts scale relative to that, then to change px sizes in dozens or hundreds of css rules.

我建议对字体使用快速眼动单元，如果只是因为它能让你，开发者，更容易改变字体的大小。的确，用户很少改变浏览器的默认字体大小，而现代浏览器的缩放将会放大px的单位。但是，如果你的老板走过来对你说:“不要放大图片或图标，但要把所有字体都放大。”只需更改根字体大小并让所有其他字体与之相关，然后以数十或数百个css规则更改px大小就容易得多。

I think it still makes sense to use px units for some images, or for certain layout elements that should always be the same size regardless of the scale of the design.

我认为在一些图片中使用px是有意义的，或者对于某些布局元素来说，无论设计的规模如何，都应该是相同的大小。

Caniuse.com may have said that only 75% of browsers when josh3736 posted his answer in 2012, but as of March 27 they claim 93.78% support. Only IE8 doesn't support it among the browsers they track.

当josh3736在2012年发布他的答案时，Caniuse.com可能只说了75%的浏览器，但截至3月27日，他们声称有93.78%的支持。在他们追踪的浏览器中，只有IE8不支持它。

#6

1  

pt is similar to rem, in that it's relatively fixed, but almost always DPI-independent, even when non-compliant browsers treat px in a device-dependent fashion. rem varies with the font size of the root element, but you can use something like Sass/Compass to do this automatically with pt.

pt类似于rem，因为它是相对固定的，但几乎总是与dpi无关，即使不兼容的浏览器以设备依赖的方式对待px。rem随着根元素的字体大小而变化，但是你可以使用Sass/Compass这样的工具来自动地处理pt。

If you had this:

如果你有这个:

html {
    font-size: 12pt;
}

then 1rem would always be 12pt. rem and em are only as device-independent as the elements on which they rely; some browsers don't behave according to spec, and treat px literally. Even in the old days of the Web, 1 point was consistently regarded as 1/72 inch--that is, there are 72 points in an inch.

那么1rem就是12pt。rem和em与它们所依赖的元素一样，都是与设备无关的;有些浏览器并没有按照规范来运行，而是按照字面意思来处理px。即使在过去的网络时代，1分一直被认为是1/72英寸——也就是说，每英寸有72分。

If you have an old, non-compliant browser, and you have:

如果你有一个旧的，不兼容的浏览器，你有:

html {
    font-size: 16px;
}

then 1rem is going to be device-dependent. For elements that would inherit from html by default, 1em would also be device-dependent. 12pt would be the hopefully guaranteed device-independent equivalent: 16px / 96px * 72pt = 12pt, where 96px = 72pt = 1in.

1rem依赖于设备。对于默认继承自html的元素，1em也依赖于设备。12pt有望成为与设备无关的等价类:16px / 96px * 72pt = 12pt，其中96px = 72pt = 1in。

It can get pretty complicated to do the math if you want to stick to specific units. For example, .75em of html = .75rem = 9pt, and .66em of .75em of html = .5rem = 6pt. A good rule of thumb:

如果你想要坚持特定的单位，那么做数学就会变得相当复杂。例如，.75em of html = .75rem = 9pt， .66em of .75em of html = .5rem = 6pt。一条很好的经验法则:

  • Use pt for absolute sizes. If you really need this to be dynamic relative to the root element, you're asking too much of CSS; you need a language that compiles to CSS, like Sass/SCSS.
  • 绝对尺寸使用pt。如果你真的需要它相对于根元素来说是动态的，那么你对CSS的要求就太多了;你需要一种编译CSS的语言，比如Sass/SCSS。
  • Use em for relative sizes. It's pretty handy to be able to say, "I want the margin on the left to be about the maximum width of a letter," or, "Make this element's text just a bit bigger than its surroundings." <h1> is a good element on which to use a font size in ems, since it might appear in various places, but should always be bigger than nearby text. This way, you don't have to have a separate font size for every class that's applied to h1: the font size will adapt automatically.
  • 对于相对大小使用em。可以说，“我想让左边的边距达到一个字母的最大宽度”，或者“让这个元素的文本比它周围的内容大一点”，这很方便。

    是一个很好的元素，可以在ems中使用字体大小，因为它可能出现在不同的位置，但应该始终大于附近的文本。这样，您就不必为每个应用到h1的类都设置单独的字体大小:字体大小将自动调整。

  • Use px for very tiny sizes. At very small sizes, pt can get blurry in some browsers at 96 DPI, since pt and px don't quite line up. If you just want to create a thin, one-pixel border, say so. If you have a high-DPI display, this won't be obvious to you during testing, so be sure to test on a generic 96-DPI display at some point.
  • 对于很小的尺寸使用px。在很小的尺寸下，pt在某些浏览器中会在96 DPI下变得模糊，因为pt和px并不是完全一致的。如果你只是想创建一个细的、一个像素的边框，那就这么说。如果您有一个高dpi显示，那么在测试过程中这对您来说并不明显，所以一定要在某个时间点上测试一个通用的96-DPI显示。
  • Don't deal in subpixels to make things fancy on high-DPI displays. Some browsers might support it--particularly on high-DPI displays--but it's a no-no. Most users prefer big and clear, though the web has taught us developers otherwise. If you want to add extended detail for your users with state-of-the-art screens, you can use vector graphics (read: SVG), which you should be doing anyway.
  • 不要在高dpi的屏幕上使用小像素来显示。一些浏览器可能会支持它——尤其是在高dpi屏幕上——但这是一个禁忌。大多数用户更喜欢大的和清晰的，尽管web教会了我们开发人员不同的东西。如果您想为您的用户添加最先进的屏幕，您可以使用矢量图形(read: SVG)，无论如何您都应该这样做。

#7

0  

I've found the best way to program the font sizes of a website are to define a base font size for the body and then use em's (or rem's) for every other font-size I declare after that. That's personal preference I suppose, but it's served me well and also made it very easy to incorporate a more responsive design.

我发现设计网站字体大小的最好方法是为主体定义一个基本的字体大小，然后对之后声明的其他字体大小使用em's(或rem's)。我想这是我个人的偏好，但它对我很有帮助，也让我很容易就能设计出更灵敏的设计。

As far as using rem units go, I think it's good to find a balance between being progressive in your code, but to also offer support for older browsers. Check out this link about browser support for rem units, that should help out a good amount on your decision.

至于快速眼动单元的使用，我认为最好在代码的渐进性和对旧浏览器的支持之间找到平衡。看看这个关于浏览器对快速眼动单元的支持的链接，这对你的决定有很大帮助。

#8

-3  

Yes. Or, rather, no.

是的。或者,更确切的说,没有。

Er, I mean, it doesn't matter. Use the one that makes sense for your particular project. PX and EM or both equally valid but will behave a bit different depending on your overall page's CSS architecture.

呃，我是说，没关系。使用对您的特定项目有意义的那个。PX和EM或两者都同样有效，但根据整个页面的CSS体系结构，它们的行为会有所不同。

UPDATE:

更新:

To clarify, I'm stating that usually it likely doesn't matter which you use. At times, you may specifically want to choose one over the other. EMs are nice if you can start from scratch and want to use a base font size and make everything relative to that.

澄清一下，我的意思是，通常情况下，你用什么都无所谓。有时，您可能特别希望选择其中之一。如果您可以从头开始，并希望使用基本的字体大小，并将所有内容都与此相关，那么EMs就很好了。

PXs are often needed when you're retrofitting a redesign onto an existing code base and need the specificity of px to prevent bad nesting issues.

当您在对现有代码库进行重新设计时，通常需要PXs，并且需要px的专一性来防止错误的嵌套问题。

#9

-4  

em's are the way forward, not just for fonts but you can use them with boxes, line thickness and other stuff too, why?

em是前进的方向，不仅仅是字体，你也可以用它们来做框，线条粗细等等，为什么?

Put simply em's are the only ones that scale in unison with the alt+ and alt- keys in the browser for zooming.

简单地说，em是唯一与alt+和alt-键在浏览器中缩放一致的。

Other measurements scale, but not as cleanly as an em.

其他测量尺度，但不像em那样干净。

On a side note if you want the best in scaling, also convert your graphics to vector based SVG where possible too as these will also cleanly scale with the browsers zoom ratio.

另一方面，如果您希望得到最好的缩放效果，也可以将图形转换为基于向量的SVG(如果可能的话)，因为这些缩放比例也将与浏览器的缩放比例一致。

#10

-5  

EMs are the ONLY thing that scales for media queries that handle +/- scaling, which people do all the time, not just blind people. Here's another very well written professional demonstration of why this matters.

EMs是媒体查询的唯一标准，它可以处理+/-缩放，这是人们一直在做的，而不仅仅是盲人。这是另一个写得很好的专业演示。

By the way, this is why Zurb Foundation uses ems, while the inferior Bootstrap 3 still uses pixels.

顺便说一下，这就是为什么Zurb Foundation使用ems，而劣质的Bootstrap 3仍然使用像素。

#1

364  

TL;DR: use px.

TL;博士:使用px。

The Facts

  • First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.

    首先，非常重要的是要知道，根据每个规范，CSS px单元并不等于一个物理显示像素。即使在1996年的CSS 1规范中也是如此。

    CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.

    CSS定义了参考像素，它测量了一个像素在96 dpi显示器上的大小。在一个dpi与96dpi(如Retina display)有本质区别的显示器上，用户代理将px单元重新展开，使其大小与参考像素的大小相匹配。换句话说，这就是为什么1个CSS像素等于2个物理视网膜显示像素的原因。

    That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.

    也就是说，直到2010年(尽管有移动缩放的情况)，px几乎总是等于一个物理像素，因为所有广泛使用的显示器都在96dpi左右。

  • Sizes specified in ems are relative to the parent element. This leads to the em's "compounding problem" where nested elements get progressively larger or smaller. For example:

    ems中指定的大小相对于父元素。这导致了em的“复合问题”，嵌套元素逐渐增大或减小。例如:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Gives us:

    给我们:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • The CSS3 rem, which is always relative only to the root html element, is too new to rely on. As of July 2012, around 75% of all browsers in use support the rem.

    CSS3快速眼动(rem)始终只与根html元素相关，它太新了，不值得依赖。截至2012年7月，大约75%的浏览器都支持快速眼动。

The Opinion

I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.

我想每个人都同意，设计你的页面是为了迎合每个人，并考虑到视障人士。这样的考虑之一(但不是唯一的一个!)是允许用户使你的网站的文本更大，以便更容易阅读。

In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn't scale when changing the browser's font size option.

在一开始，为用户提供一种扩展文本大小的方法的唯一方法是使用相对大小的单元(比如ems)。这是因为浏览器的字体大小菜单仅仅改变了根字体大小。因此，如果您在px中指定字体大小，那么当您更改浏览器的字体大小选项时，它们不会伸缩。

Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.

现代的浏览器(甚至是不那么现代的IE7)都改变了默认的缩放方法，将所有的东西放大，包括图像和盒子大小。本质上，它们使参考像素变得更大或更小。

Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).

是的，有些人仍然可以更改浏览器默认样式表来调整默认字体大小(相当于旧式字体大小选项)，但这是一种非常深奥的方式，我敢打赌nobody1会这么做。(在Chrome中，它被隐藏在高级设置、网页内容和字体大小之下。在IE9中，它更加隐蔽。你必须按Alt键，然后点击查看，文本大小。只需在浏览器的主菜单中选择Zoom选项(或者使用Ctrl++/-/鼠标滚轮)就容易得多。

1 - within statistical error, naturally

1 -在统计误差范围内，自然。

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)

如果我们假设大多数用户使用zoom选项缩放页面，那么我发现相对单位几乎是不相关的。当所有内容都在同一个单元中指定时(图像都是用像素处理的)，开发页面要容易得多，而且您不必担心复合。(“我被告知不会有数学运算”——需要计算出1.5em到底是用来做什么的。)

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.

另一个可能的问题是，只对字体大小使用相对单位，用户调整字体大小可能会打破布局的假设。例如，这可能导致文本被剪切或运行太长。如果您使用的是绝对单位，您就不必担心会破坏布局的意外字体大小。

So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use ems anyway.

我的答案是使用像素单位。我什么都用px。当然，您的情况可能会有所不同，如果您必须支持IE6(希望RFCs的诸神怜悯您)，那么无论如何您都必须使用ems。

#2

79  

I would like to praise josh3736's answer for providing some excellent historical context. While it's well articulated, the CSS landscape has changed in the almost five years since this question was asked. When this question was asked, px was the correct answer, but that no longer holds true today.

我想赞扬josh3736提供了一些优秀的历史背景。虽然这个问题得到了很好的阐述，但自从这个问题被提出以来，CSS的面貌已经发生了近5年的变化。当这个问题被提出时，px是正确的答案，但这在今天已经不成立了。

tl;dr: use rem

tl;博士:使用快速眼动

Unit Overview

Historically px units typically represented one device pixel. With devices having higher and higher pixel density this no longer holds for many devices, such as with Apple's Retina Display.

在历史上，px单位通常代表一个设备像素。随着设备具有越来越高的像素密度，这不再适用于许多设备，比如苹果的视网膜显示屏。

rem units represent the root em size. It's the font-size of whatever matches :root. In the case of HTML, it's the <html> element; for SVG, it's the <svg> element. The default font-size in every browser* is 16px.

快速眼动单位表示em的根尺寸。它是任何匹配的字体大小:根。在HTML中，它是< HTML >元素;对于SVG，它是< SVG >元素。每个浏览器的默认字体大小是16px。

At the time of writing, rem is supported by approximately 98% of users. If you're worried about that other 2%, I'll remind you that media queries are also supported by approximately 98% of users.

在撰写本文时，rem得到了大约98%的用户的支持。如果您担心另外2%，我将提醒您，大约98%的用户也支持媒体查询。

On Using px

The majority of CSS examples on the internet use px values because they were the de-facto standard. pt, in and a variety of other units could have been used in theory, but they didn't handle small values well as you'd quickly need to resort to fractions, which were longer to type, and harder to reason about.

internet上大多数CSS示例都使用px值，因为它们是事实上的标准。pt, in和其他很多单位都可以在理论上使用，但是他们没有处理小的值，因为你很快需要用到分数，这是更长的类型，更难以解释。

If you wanted a thin border, with px you could use 1px, with pt you'd need to use 0.75pt for consistent results, and that's just not very convenient.

如果你想要一个细边框，你可以用1px，用pt你需要用0.75pt来得到一致的结果，这不是很方便。

On Using rem

rem's default value of 16px isn't a very strong argument for its use. Writing 0.0625rem is worse than writing 0.75pt, so why would anyone use rem?

rem的默认值是16px，这并不是使用它的有力论据。写0.0625rem比写0.75pt还要糟糕，为什么有人要用rem?

There are two parts to rem's advantage over other units.

快速眼动的优势有两个方面。

  • User preferences are respected
  • 尊重用户首选项
  • You can change the apparent px value of rem to whatever you'd like
  • 你可以将快速眼动的像素值改变为你想要的。

Respecting User Preferences

Browser zoom has changed a lot over the years. Historically many browsers would only scale up font-size, but that changed pretty rapidly when websites realized that their beautiful pixel-perfect designs were breaking any time someone zoomed in or out. At this point, browsers scale the entire page, so font-based zooming is out of the picture.

多年来，浏览器的缩放改变了很多。历史上，很多浏览器只会放大字体大小，但当网站意识到自己漂亮的像素设计在用户放大或缩小时就会崩溃时，情况就发生了很大的变化。此时，浏览器会扩展整个页面，因此基于字体的缩放不在考虑范围之内。

Respecting a user's wishes is not out of the picture. Just because a browser is set to 16px by default, doesn't mean any user can't change their preferences to 24px or 32px to correct for bad vision. If you base your units off of rem, any user at a higher font-size will see a proportionally larger site. Borders will be bigger, padding will be bigger, margins will be bigger, everything will scale up fluidly.

尊重用户的意愿是不可能的。仅仅因为浏览器默认设置为16px，并不意味着任何用户不能将他们的首选项更改为24px或32px，以纠正错误的视觉效果。如果你把你的单位建立在快速眼动的基础上，任何用户在一个更高的字体大小将看到一个比例更大的网站。边界会更大，填充会更大，边缘会更大，所有的东西都将变得流畅。

If you base your media queries on rem, you can also make sure that the site your users see fits their screen. A user with font-size set to 32px on a 640px wide browser, will effectively be seeing your site as shown to a user at 16px on a 320px wide browser. There's absolutely no loss for RWD in using rem.

如果你的媒体查询是基于rem，你还可以确保你的用户看到的网站适合他们的屏幕。在一个640px的浏览器中，一个字体大小设置为32px的用户，在一个320px的浏览器中，会看到一个16px的用户。在使用rem期间，RWD绝对没有损失。

Changing Apparent px Value

Because rem is based on the font-size of the :root node, if you want to change what 1rem represents, all you have to do is change the font-size:

因为rem是基于:根节点的字体大小，如果你想要改变1rem的表示，你所要做的就是改变字体大小:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>

Whatever you do, don't set the :root element's font-size to a px value.

无论如何，不要将:root元素的字体大小设置为px值。

If you set the font-size on html to a px value, you've blown away the user's preferences without a way to get them back.

如果您将html上的字体大小设置为px值，那么您就已经消除了用户的首选项，而无法获得它们。

If you want to change the apparent value of rem, use % units.

如果您想改变rem的视值，请使用% unit。

The math for this is reasonably straight-forward.

这方面的计算相当简单。

The apparent font-size of :root is 16px, but lets say we want to change it to 20px. All we need to do is multiply 16 by some value to get 20.

root的表观字体大小是16px，但是我们想把它改成20px。我们要做的就是用16乘以某个值得到20。

Set up your equation:

设置你的方程:

16 * X = 20

And solve for X:

对X和解决:

X = 20 / 16
X = 1.25
X = 125%


:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>

Doing everything in multiples of 20 isn't all that great, but a common suggestion is to make the apparent size of rem equal to 10px. The magic number for that is 10/16 which is 0.625, or 62.5%.

以20的倍数来做每一件事并不是很好，但是一个常见的建议是让rem的表面大小等于10px。神奇的是10/16 = 0。625，或者说62.5%

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>

The problem now is that your default font-size for the rest of the page is set way too small, but there's a simple fix for that: Set a font-size on body using rem:

现在的问题是，页面其余部分的默认字体大小设置得太小了，但有一个简单的解决方案:使用rem在主体上设置字体大小:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

It's important to note, with this adjustment in place, the apparent value of rem is 10px which means any value you might have written in px can be converted directly to rem by bumping a decimal place.

需要注意的是，有了这个调整，rem的表观值是10px，这就意味着你可能写在px上的任何值都可以直接转换成rem，只需按小数点后一位就可以了。

padding: 20px;

turns into

变成

padding: 2rem;

The apparent font-size you choose is up to you, so if you want there's no reason you can't use:

你选择的字体大小取决于你自己，所以如果你想要，你没有理由不能使用:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

and have 1rem equal 1px.

1rem = 1px。

So there you have it, a simple solution to respect user wishes while also avoiding over-complicating your CSS.

这就是一个简单的解决方案，既可以尊重用户的意愿，又可以避免CSS过于复杂。

Wait, so what's the catch?

I was afraid you might ask that. As much as I'd like to pretend that rem is magic and solves-all-things, there are still some issues of note. Nothing deal-breaking in my opinion, but I'm going to call them out so you can't say I didn't warn you.

我怕你会问。尽管我很想假装rem是魔法和解决一切的方法，但还是有一些值得注意的问题。在我看来没有什么破坏协议的，但是我要把他们叫出来，这样你就不能说我没有警告过你。

Media Queries

One of the first issues you'll run into with rem involves media queries. Consider the following code:

快速眼动的第一个问题涉及到媒体查询。考虑下面的代码:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Here the value of rem changes depending on whether the media-query applies, and the media query depends on the value of rem, so what on earth is going on?

这里，快速眼动的值取决于媒体查询是否适用，而媒体查询取决于快速眼动的值，那么究竟发生了什么呢?

rem in media queries uses the initial value of font-size and does not take into account any changes that may have happened to the font-size of the :root element. In other words, it's apparent value is always 16px.

在媒体查询中，rem使用的是字体大小的初始值，并且没有考虑到可能发生的任何变化:根元素的字体大小。换句话说，它的表观值总是16px。

This is a bit annoying, because it means that you have to do some fractional calculations, but I have found that most common media queries already use values that are multiples of 16.

这有点烦人，因为这意味着您必须做一些小数计算，但是我发现大多数常见的媒体查询已经使用的值是16的倍数。

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

Additionally if you're using a CSS preprocessor, you can use mixins or variables to manage your media queries, which will mask the issue entirely.

此外，如果您使用的是CSS预处理器，您可以使用mixin或变量来管理您的媒体查询，这将完全掩盖问题。

Context Switching

If you switch between projects various different projects, it's quite possible that the apparent font-size of rem will have different values. In one project, you might be using an apparent size of 10px where in another project the apparent size might be 1px. This can be confusing and cause issues.

如果你在不同的项目之间切换，很有可能快速眼动的明显的字体大小会有不同的值。在一个项目中，您可能使用一个10px的外观大小，而在另一个项目中，这个外观大小可能是1px。这可能会让人感到困惑并引发问题。

My only recommendation here is to stick with 62.5% to convert rem to an apparent size of 10px, because that has been more common in my experience.

我在这里唯一的建议是坚持使用62.5%的rem，将其转换为10px的大小，因为在我的经验中这是很常见的。

Shared CSS Libraries

If you're writing CSS that's going to be used on a site that you don't control, such as for an embedded widget, there's really no good way to know what apparent size rem will have. If that's the case, feel free to keep using px.

如果你正在编写的CSS将被用于你不控制的网站，比如一个嵌入式小部件，那么你就没有办法知道什么是明显的快速眼动。如果是这样，可以继续使用px。

If you still want to use rem though, consider releasing a Sass or LESS version of the stylesheet with a variable to override the scaling for the apparent size of rem.

如果您仍然想使用rem，可以考虑发布样式表的Sass或更少版本，并使用一个变量来覆盖对rem大小的缩放。

* I don't want to spook anyone away from using rem, but I haven't been able to officially confirm that every browser uses 16px by default. You see, there are a lot of browsers and it wouldn't be all that hard for one browser to have diverged ever so slightly to, say 15px or 18px. In testing, however I have not seen a single example where a browser using default settings in a system using default settings had any value other than 16px. If you find such an example, please share it with me.

*我不想吓唬任何人不要使用rem，但我还不能正式确认每个浏览器默认使用16px。你看，有很多浏览器，对于一个浏览器来说，它的差异不会那么大，比如15px或18px。在测试中，我还没有看到一个例子，在一个使用默认设置的系统中使用默认设置的浏览器，除了16px之外还有其他值。如果你找到这样的例子，请与我分享。

#3

40  

This article describes pretty well the pros and cons of px, em, and rem.

本文很好地描述了px、em和rem的优缺点。

The author finally concludes that the best method is probably to use both px and rem, declaring px first for older browsers and redeclaring rem for newer browsers:

作者最后得出的结论是，最好的方法可能是同时使用px和rem，在旧的浏览器中先声明px，在新浏览器中重新声明rem:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

#4

7  

As a reflex answer, I would recommend using rem, because it allows you to change the "zoom level" of the whole document at once, if necessary. In some cases, when you want the size to be relative to the parent element, then use em.

作为一种反射性的回答，我建议使用rem，因为它允许您在必要时立即更改整个文档的“缩放级别”。在某些情况下，当您希望大小相对于父元素时，那么使用em。

But rem support is spotty, IE8 needs a polyfill, and Webkit is exhibiting a bug. Moreover, sub-pixel calculation can cause things such as one pixel lines to sometimes disappear. The remedy is to code in pixels for such very small elements. That introduces even more complexity.

但是快速眼动支持不稳定，IE8需要一个多填充，Webkit出现了一个bug。此外，亚像素计算可以导致像一个像素线这样的东西有时消失。补救办法是为如此小的元素编写像素。这就引入了更多的复杂性。

So, overall, ask yourself whether it's worth it - how important and likely it is that you change the "zoom level" of the whole document within CSS?

所以，总的来说，问问自己是否值得这么做——在CSS中更改整个文档的“缩放级别”有多重要，有多可能?

For some cases it's yes, for some cases it'll be no.

在某些情况下是肯定的，在某些情况下是否定的。

So, it depends on your needs, and you have to weight pros and cons, because using rem and em introduces some additional considerations in comparison to the "normal" pixel-based workflow.

因此，这取决于您的需求，您必须权衡利弊，因为使用rem和em比基于“普通”像素的工作流引入了一些额外的考虑。

Keep in mind that it's easy to switch (or rather convert) your CSS from px to rem (JavaScript is another story), because the following two blocks of CSS code would produce the same result:

请记住，将CSS从px转换为rem (JavaScript是另一个故事)很容易，因为接下来的两个CSS代码块会产生相同的结果:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

#5

2  

josh3736's answer is a good one, but to provide a counterpoint 3 years later:

josh3736的答案很好，但三年后提供了一个对比:

I recommend using rem units for fonts, if only because it makes it easier for you, the developer, to change sizes. It's true that users very rarely change the default font size in their browsers, and that modern browser zoom will scale up px units. But what if your boss comes to you and says "don't enlarge the images or icons, but make all the fonts bigger". It's much easier to just change the root font size and let all the other fonts scale relative to that, then to change px sizes in dozens or hundreds of css rules.

我建议对字体使用快速眼动单元，如果只是因为它能让你，开发者，更容易改变字体的大小。的确，用户很少改变浏览器的默认字体大小，而现代浏览器的缩放将会放大px的单位。但是，如果你的老板走过来对你说:“不要放大图片或图标，但要把所有字体都放大。”只需更改根字体大小并让所有其他字体与之相关，然后以数十或数百个css规则更改px大小就容易得多。

I think it still makes sense to use px units for some images, or for certain layout elements that should always be the same size regardless of the scale of the design.

我认为在一些图片中使用px是有意义的，或者对于某些布局元素来说，无论设计的规模如何，都应该是相同的大小。

Caniuse.com may have said that only 75% of browsers when josh3736 posted his answer in 2012, but as of March 27 they claim 93.78% support. Only IE8 doesn't support it among the browsers they track.

当josh3736在2012年发布他的答案时，Caniuse.com可能只说了75%的浏览器，但截至3月27日，他们声称有93.78%的支持。在他们追踪的浏览器中，只有IE8不支持它。

#6

1  

pt is similar to rem, in that it's relatively fixed, but almost always DPI-independent, even when non-compliant browsers treat px in a device-dependent fashion. rem varies with the font size of the root element, but you can use something like Sass/Compass to do this automatically with pt.

pt类似于rem，因为它是相对固定的，但几乎总是与dpi无关，即使不兼容的浏览器以设备依赖的方式对待px。rem随着根元素的字体大小而变化，但是你可以使用Sass/Compass这样的工具来自动地处理pt。

If you had this:

如果你有这个:

html {
    font-size: 12pt;
}

then 1rem would always be 12pt. rem and em are only as device-independent as the elements on which they rely; some browsers don't behave according to spec, and treat px literally. Even in the old days of the Web, 1 point was consistently regarded as 1/72 inch--that is, there are 72 points in an inch.

那么1rem就是12pt。rem和em与它们所依赖的元素一样，都是与设备无关的;有些浏览器并没有按照规范来运行，而是按照字面意思来处理px。即使在过去的网络时代，1分一直被认为是1/72英寸——也就是说，每英寸有72分。

If you have an old, non-compliant browser, and you have:

如果你有一个旧的，不兼容的浏览器，你有:

html {
    font-size: 16px;
}

then 1rem is going to be device-dependent. For elements that would inherit from html by default, 1em would also be device-dependent. 12pt would be the hopefully guaranteed device-independent equivalent: 16px / 96px * 72pt = 12pt, where 96px = 72pt = 1in.

1rem依赖于设备。对于默认继承自html的元素，1em也依赖于设备。12pt有望成为与设备无关的等价类:16px / 96px * 72pt = 12pt，其中96px = 72pt = 1in。

It can get pretty complicated to do the math if you want to stick to specific units. For example, .75em of html = .75rem = 9pt, and .66em of .75em of html = .5rem = 6pt. A good rule of thumb:

如果你想要坚持特定的单位，那么做数学就会变得相当复杂。例如，.75em of html = .75rem = 9pt， .66em of .75em of html = .5rem = 6pt。一条很好的经验法则:

  • Use pt for absolute sizes. If you really need this to be dynamic relative to the root element, you're asking too much of CSS; you need a language that compiles to CSS, like Sass/SCSS.
  • 绝对尺寸使用pt。如果你真的需要它相对于根元素来说是动态的，那么你对CSS的要求就太多了;你需要一种编译CSS的语言，比如Sass/SCSS。
  • Use em for relative sizes. It's pretty handy to be able to say, "I want the margin on the left to be about the maximum width of a letter," or, "Make this element's text just a bit bigger than its surroundings." <h1> is a good element on which to use a font size in ems, since it might appear in various places, but should always be bigger than nearby text. This way, you don't have to have a separate font size for every class that's applied to h1: the font size will adapt automatically.
  • 对于相对大小使用em。可以说，“我想让左边的边距达到一个字母的最大宽度”，或者“让这个元素的文本比它周围的内容大一点”，这很方便。

    是一个很好的元素，可以在ems中使用字体大小，因为它可能出现在不同的位置，但应该始终大于附近的文本。这样，您就不必为每个应用到h1的类都设置单独的字体大小:字体大小将自动调整。

  • Use px for very tiny sizes. At very small sizes, pt can get blurry in some browsers at 96 DPI, since pt and px don't quite line up. If you just want to create a thin, one-pixel border, say so. If you have a high-DPI display, this won't be obvious to you during testing, so be sure to test on a generic 96-DPI display at some point.
  • 对于很小的尺寸使用px。在很小的尺寸下，pt在某些浏览器中会在96 DPI下变得模糊，因为pt和px并不是完全一致的。如果你只是想创建一个细的、一个像素的边框，那就这么说。如果您有一个高dpi显示，那么在测试过程中这对您来说并不明显，所以一定要在某个时间点上测试一个通用的96-DPI显示。
  • Don't deal in subpixels to make things fancy on high-DPI displays. Some browsers might support it--particularly on high-DPI displays--but it's a no-no. Most users prefer big and clear, though the web has taught us developers otherwise. If you want to add extended detail for your users with state-of-the-art screens, you can use vector graphics (read: SVG), which you should be doing anyway.
  • 不要在高dpi的屏幕上使用小像素来显示。一些浏览器可能会支持它——尤其是在高dpi屏幕上——但这是一个禁忌。大多数用户更喜欢大的和清晰的，尽管web教会了我们开发人员不同的东西。如果您想为您的用户添加最先进的屏幕，您可以使用矢量图形(read: SVG)，无论如何您都应该这样做。

#7

0  

I've found the best way to program the font sizes of a website are to define a base font size for the body and then use em's (or rem's) for every other font-size I declare after that. That's personal preference I suppose, but it's served me well and also made it very easy to incorporate a more responsive design.

我发现设计网站字体大小的最好方法是为主体定义一个基本的字体大小，然后对之后声明的其他字体大小使用em's(或rem's)。我想这是我个人的偏好，但它对我很有帮助，也让我很容易就能设计出更灵敏的设计。

As far as using rem units go, I think it's good to find a balance between being progressive in your code, but to also offer support for older browsers. Check out this link about browser support for rem units, that should help out a good amount on your decision.

至于快速眼动单元的使用，我认为最好在代码的渐进性和对旧浏览器的支持之间找到平衡。看看这个关于浏览器对快速眼动单元的支持的链接，这对你的决定有很大帮助。

#8

-3  

Yes. Or, rather, no.

是的。或者,更确切的说,没有。

Er, I mean, it doesn't matter. Use the one that makes sense for your particular project. PX and EM or both equally valid but will behave a bit different depending on your overall page's CSS architecture.

呃，我是说，没关系。使用对您的特定项目有意义的那个。PX和EM或两者都同样有效，但根据整个页面的CSS体系结构，它们的行为会有所不同。

UPDATE:

更新:

To clarify, I'm stating that usually it likely doesn't matter which you use. At times, you may specifically want to choose one over the other. EMs are nice if you can start from scratch and want to use a base font size and make everything relative to that.

澄清一下，我的意思是，通常情况下，你用什么都无所谓。有时，您可能特别希望选择其中之一。如果您可以从头开始，并希望使用基本的字体大小，并将所有内容都与此相关，那么EMs就很好了。

PXs are often needed when you're retrofitting a redesign onto an existing code base and need the specificity of px to prevent bad nesting issues.

当您在对现有代码库进行重新设计时，通常需要PXs，并且需要px的专一性来防止错误的嵌套问题。

#9

-4  

em's are the way forward, not just for fonts but you can use them with boxes, line thickness and other stuff too, why?

em是前进的方向，不仅仅是字体，你也可以用它们来做框，线条粗细等等，为什么?

Put simply em's are the only ones that scale in unison with the alt+ and alt- keys in the browser for zooming.

简单地说，em是唯一与alt+和alt-键在浏览器中缩放一致的。

Other measurements scale, but not as cleanly as an em.

其他测量尺度，但不像em那样干净。

On a side note if you want the best in scaling, also convert your graphics to vector based SVG where possible too as these will also cleanly scale with the browsers zoom ratio.

另一方面，如果您希望得到最好的缩放效果，也可以将图形转换为基于向量的SVG(如果可能的话)，因为这些缩放比例也将与浏览器的缩放比例一致。

#10

-5  

EMs are the ONLY thing that scales for media queries that handle +/- scaling, which people do all the time, not just blind people. Here's another very well written professional demonstration of why this matters.

EMs是媒体查询的唯一标准，它可以处理+/-缩放，这是人们一直在做的，而不仅仅是盲人。这是另一个写得很好的专业演示。

By the way, this is why Zurb Foundation uses ems, while the inferior Bootstrap 3 still uses pixels.

顺便说一下，这就是为什么Zurb Foundation使用ems，而劣质的Bootstrap 3仍然使用像素。

标签：

相关文章