488

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

我的问题是：我应该使用px还是rem在我的 CSS 中？

  • 到目前为止，我知道 usingpx与在浏览器中调整基本字体大小的用户不兼容。
  • 我忽略了 s ，因为与 s 相比，它们在级联em时更难维护。rem
  • 有人说rems 与分辨率无关，因此更可取。但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素，因此使用px不是问题。

我问这个是因为对于 CSS 中最理想的距离度量有很多不同的意见，我不确定哪个是最好的。

4

10 回答 10

522

TL；DR：使用px.

事实

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

    CSS 定义了参考像素，它测量 96 dpi 显示器上像素的大小。在 dpi 与 96dpi 显着不同的显示器（如 Retina 显示器）上，用户代理会重新调整px单位，使其大小与参考像素的大小相匹配。换句话说，这种重新缩放正是 1 个 CSS 像素等于 2 个物理 Retina 显示像素的原因。

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

  • s 中指定的大小em是相对于父元素的。这会导致em嵌套元素逐渐变大或变小的“复合问题”。例如：

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

    给我们：

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

  • CSS3rem始终只与根html元素相关，现在99.67% 的所有正在使用的浏览器都支持它。

意见

我认为每个人都同意，将您的页面设计为适合所有人，并考虑到视障者是很好的。一个这样的考虑（但不是唯一的一个！）是允许用户使您的站点的文本更大，以便更容易阅读。

一开始，为用户提供缩放文本大小的唯一方法是使用相对大小单位（例如ems）。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在 中指定字体大小px，则在更改浏览器的字体大小选项时它们不会缩放。

现代浏览器（甚至不那么现代的 IE7）都将默认缩放方法更改为简单地放大所有内容，包括图像和框大小。本质上，它们使参考像素变大或变小。

是的，仍然有人可以更改他们的浏览器默认样式表来调整默认字体大小（相当于旧式字体大小选项），但这是一种非常深奥的方法，我敢打赌没人会这样做。（在 Chrome 中，它隐藏在高级设置、Web 内容、字体大小下。在 IE9 中，它更加隐藏。您必须按 Alt，然后转到查看、文本大小。）只需选择缩放选项就容易多了浏览器的主菜单（或使用Ctrl+ +/ -/鼠标滚轮）。

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

如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位大多无关紧要。如果所有内容都以相同的单位指定（图像均以像素为单位），则开发页面会容易得多，并且您不必担心复合。（“有人告诉我不会有数学运算” ——需要计算 1.5em 的实际结果。）

仅对字体大小使用相对单位的另一个潜在问题是用户调整大小的字体可能会破坏您的布局所做的假设。例如，这可能会导致文本被剪裁或运行时间过长。如果您使用绝对单位，则不必担心意外的字体大小会破坏您的布局。

所以我的答案是使用像素单位。我px什么都用。当然，您的情况可能会有所不同，如果您必须支持 IE6（请 RFC 之神怜悯您），em无论如何您都必须使用 s。

于 2012-08-03T21:04:18.543 回答
352

我想赞扬josh3736 的回答，因为它提供了一些出色的历史背景。虽然很清楚，但自从提出这个问题以来，CSS 格局在近五年内发生了变化。当这个问题被问到时，这px 是正确的答案，但今天不再适用。

tl;博士：使用rem

单位概述

从历史上看px，单位通常代表一个设备像素。随着设备的像素密度越来越高，这不再适用于许多设备，例如 Apple 的 Retina Display。

rem单位表示根em大小。这是font-size任何匹配的:root。在 HTML 的情况下，它是<html>元素；对于 SVG，它是<svg>元素。font-size每个浏览器* 中的默认值是16px.

关于使用px

Internet 上的大多数 CSS 示例都使用px值，因为它们是事实上的标准。pt，并且理论上可以in使用各种其他单位，但它们不能很好地处理小值，因为您很快需要求助于分数，这些分数更长，更难推理。

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

关于使用rem

rem的默认值16px对于它的使用来说并不是一个非常有力的论据。写作比写作0.0625rem更糟糕0.75pt，那么为什么会有人使用rem呢？

与其他单位相比，有两个rem优势。

  • 尊重用户偏好
  • 您可以将表观px值更改为rem您想要的任何值

尊重用户偏好

浏览器缩放多年来发生了很大变化。从历史上看，许多浏览器只会扩大规模font-size，但当网站意识到他们美丽的像素完美设计在任何人放大或缩小时都会破坏时，这种情况发生了相当大的变化。此时，浏览器会缩放整个页面，因此基于字体的缩放是不可能的。

尊重用户的意愿并非不可能。仅仅因为浏览器16px默认设置为，并不意味着任何用户都不能将他们的偏好更改为24px或32px纠正低视力或低能见度（例如屏幕眩光）。如果您的单位基于rem，则任何具有较高字体大小的用户都会看到按比例增大的网站。边框会更大，内边距会更大，边距会更大，一切都会流畅地扩大。

如果您的媒体查询基于rem，您还可以确保您的用户看到的网站适合他们的屏幕。在宽浏览器上font-size设置为的用户将有效地看到您的网站，如在宽浏览器上向用户显示的那样。RWD 在使用中绝对没有损失。32px640px16px320pxrem

改变表观px值

因为rem是基于节点font-size的:root，如果你想改变1rem代表什么，你所要做的就是改变font-size：

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

无论您做什么，都不要将:root元素设置font-size为一个px值。

如果您将font-sizeon设置html为一个px值，那么您已经破坏了用户的偏好，而无法让它们恢复。

如果要更改 的表观值rem，请使用%单位。

这方面的数学相当简单。

的明显字体大小:root为16px，但假设我们想将其更改为20px。我们需要做的就是乘以16某个值来得到20.

建立你的方程式：

16 * X = 20

并解决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>

做所有事情的倍数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>

现在的问题是您font-size对页面其余部分的默认设置太小了，但是有一个简单的解决方法：设置 a font-sizeon bodyusing rem：

:root {
  font-size: 62.5%;
}

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

重要的是要注意，通过这种调整， 的表观值rem意味着10px您可能写入的任何值都可以通过碰撞小数位px直接转换为。rem

padding: 20px;

变成

padding: 2rem;

您选择的明显字体大小取决于您，所以如果您愿意，没有理由不能使用：

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

并且有1rem平等1px的。

所以你有了它，一个尊重用户意愿的简单解决方案，同时也避免过度复杂的 CSS。

等等，有什么收获？

我怕你会这么问。尽管我想假装它rem很神奇并且可以解决所有问题，但仍然存在一些值得注意的问题。在我看来没有什么大不了的，但我要把他们叫出来，所以你不能说我没有警告你。

媒体查询（使用em）

您将遇到的第一个问题rem涉及媒体查询。考虑以下代码：

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

这里的值rem根据媒体查询是否适用而变化，媒体查询取决于 的值rem，那么到底发生了什么？

rem在媒体查询中使用初始值font-size并且不应该（参见 Safari 部分）考虑到元素可能发生font-size的任何变化。:root换句话说，它的表观价值总是 16px.

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

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

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

苹果浏览器

不幸的是，Safari 存在一个已知错误，其中对:root字体大小的更改确实会更改rem媒体查询范围的计算值。:root如果元素的字体大小在媒体查询中发生更改，这可能会导致一些非常奇怪的行为。幸运的是，解决方法很简单：使用em单位进行媒体查询。

上下文切换

如果您在各种不同的项目之间切换项目，则很可能会看到 font-size 的rem值不同。在一个项目中，您可能正在使用10px另一个项目中的表观大小可能是的表观大小1px。这可能会令人困惑并导致问题。

我在这里唯一的建议是坚持62.5%转换rem为 的表观大小10px，因为这在我的经验中更为常见。

共享 CSS 库

如果您正在编写将在您无法控制的网站上使用的 CSS，例如用于嵌入式小部件，那么实际上没有什么好方法可以知道外观大小rem。如果是这种情况，请随时继续使用px.

如果您仍然想使用rem，请考虑发布 Sass 或 LESS 版本的样式表，其中包含一个变量来覆盖rem.

* 我不想吓唬任何人使用rem，但我无法正式确认每个浏览器都16px默认使用。您会看到，有很多浏览器，对于一个浏览器来说，与15px或18px. 但是，在测试中，我没有看到一个示例，其中使用默认设置的系统中使用默认设置的浏览器具有除16px. 如果你找到这样的例子，请与我分享。

于 2017-03-31T03:31:44.937 回答
56

这篇文章很好地描述了px,em和rem.

作者最后得出结论，最好的方法可能是同时使用pxand 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 */
于 2012-08-03T16:40:55.267 回答
30

是的，REM 和 PX 是相对的，但其他答案建议使用 REM 而不是 PX，我还想使用可访问性示例来支持这一点。
当用户在浏览器上设置不同的字体大小时，REM 会自动放大和缩小网页上的字体、图像等元素，而 PX 则不然。

在下面的 gif 中，左侧文本使用字体大小 REM 单位设置，而右侧字体使用 PX 单位设置。

在此处输入图像描述

如您所见，当我调整网页的默认字体大小时，REM 会自动放大/缩小。（右下角）

网页的默认字体大小为 16px 等于 1 rem（仅适用于默认 html 页面 ie html{font-size:100%}），因此 1.25rem 等于 20px。

PS：还有谁在使用 REM？CSS 框架！像 Bootstrap 4、Bulma CSS 等，所以最好和它相处。

于 2019-11-11T22:50:11.060 回答
9

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

但是对 rem 的支持参差不齐，IE8 需要一个 polyfill，而 Webkit 也出现了一个错误。而且，亚像素计算有时会导致一个像素线之类的东西消失。补救方法是为这些非常小的元素以像素为单位进行编码。这引入了更多的复杂性。

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

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

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

请记住，很容易将 CSS 从 px 切换（或者说转换）为 rem（JavaScript 是另一回事），因为以下两个 CSS 代码块会产生相同的结果：

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
于 2013-12-08T20:05:34.317 回答
7

josh3736 的回答很好，但要在 3 年后提供一个对位：

我建议对字体使用单位rem，只是因为它使开发人员更容易更改大小。确实，用户很少更改浏览器中的默认字体大小，并且现代浏览器缩放会放大单位。但是如果你的老板来找你说“不要放大图像或图标，而是把所有的字体都放大”。只需更改根字体大小并让所有其他字体相对于它进行缩放，然后在数十或数百个 css 规则中更改大小，就会容易得多。pxpx

我认为对某些图像或某些布局元素使用单位仍然是有意义的，px无论设计的规模如何，它们都应该始终保持相同的大小。

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

于 2015-03-27T15:41:12.530 回答
1

我发现对网站字体大小进行编程的最佳方法是为 定义基本字体大小，body然后为font-size我之后声明的每个其他字体使用 em（或 rem）。我想这是个人喜好，但它对我很有帮助，也很容易融入更具响应性的设计。

就使用 rem 单位而言，我认为在代码的渐进性和对旧版浏览器的支持之间找到平衡是件好事。 查看有关浏览器对 rem 单位的支持的链接，这应该对您的决定有很大帮助。

于 2012-08-03T16:03:28.127 回答
1

pt类似于rem，因为它是相对固定的，但几乎总是与 DPI 无关，即使不兼容的浏览器px以设备相关的方式处理也是如此。 rem随根元素的字体大小而异，但您可以使用 Sass/Compass 之类的东西自动使用pt.

如果你有这个：

html {
    font-size: 12pt;
}

那么1rem将永远是12pt。 rem并且em仅与它们所依赖的元素一样独立于设备；一些浏览器的行为不符合规范，并按px字面意思对待。即使在 Web 的旧时代，1 点也一直被认为是 1/72 英寸——也就是说，一英寸有 72 个点。

如果您有旧的、不兼容的浏览器，并且您有：

html {
    font-size: 16px;
}

然后1rem将取决于设备。html对于默认情况下继承的元素，1em也将依赖于设备。 12pt将是有希望保证的与设备无关的等价物：16px / 96px * 72pt = 12pt，其中96px = 72pt = 1in.

如果你想坚持特定的单位，做数学可能会变得相当复杂。例如.75em of html = .75rem = 9pt， 和.66em of .75em of html = .5rem = 6pt。一个好的经验法则：

  • 用于pt绝对尺寸。 如果你真的需要它相对于根元素是动态的，那么你对 CSS 的要求太多了；你需要一种可以编译成 CSS 的语言，比如 Sass/SCSS。
  • 用于em相对尺寸。能够说“我希望左边的边距大约是一个字母的最大宽度”或者“让这个元素的文本比它周围的文本大一点”是非常方便的。 <h1>是一个在 ems 中使用字体大小的好元素，因为它可能出现在不同的地方，但应该总是比附近的文本大。这样，您不必为每个应用的类设置单独h1的字体大小：字体大小将自动适应。
  • 用于px非常小的尺寸。 在非常小的尺寸下，pt在 96 DPI 的某些浏览器中可能会变得模糊，因为pt并px没有完全对齐。如果您只想创建一个单像素的细边框，请这样说。如果您有一个高 DPI 显示器，那么在测试期间这对您来说并不明显，因此请务必在某个时候在通用 96-DPI 显示器上进行测试。
  • 不要处理子像素来使高 DPI 显示器看起来很花哨。一些浏览器可能支持它——尤其是在高 DPI 显示器上——但这是一个禁忌。大多数用户更喜欢大而清晰，尽管网络已经教会了我们开发人员。如果您想使用最先进的屏幕为您的用户添加扩展细节，您可以使用矢量图形（阅读：SVG），无论如何您都应该这样做。
于 2013-10-02T17:02:40.357 回答
-2

一半（但只有一半）尖刻的回答（另一半是对官僚主义现实的强烈蔑视）：

使用 vh

一切总是按浏览器窗口大小调整。

始终允许向下滚动，但禁用水平滚动。

将正文宽度设置为静态 50vh，并且永远不要编写浮动或突破父 div 的 css。（如果他们试图模拟一些看起来像的东西，巧妙地使用背景 gif 可能会使他们偏离轨道。）并且只使用表格来设计样式，这样所有东西都可以按预期固定到位。包括一个 javascript 函数来撤消用户可能执行的任何 ctrl+/- 活动。

用户会讨厌你，因为网站不会根据他们使用的内容而有所不同（例如文本太小而无法在手机上阅读）。你的同事会恨你，因为没有人在他们正常的头脑中这样做，这可能会破坏他们的工作（虽然不是你的）。你的编程教授会恨你，因为这不是一个好主意。你的 UX 设计师会讨厌你，因为它会暴露他们在设计 UX 模型时为了满足最后期限而必须做的工作。

几乎每个人都会讨厌你，除了那些告诉你让事情与模型相匹配并尽快完成的人。然而，那些人（通常包括项目经理）会对您的准确性和快速周转时间感到欣喜若狂。每个人都知道他们的意见是唯一对你的薪水很重要的意见。

于 2018-09-06T20:28:45.967 回答
-4

是的。或者，更确切地说，没有。

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

更新：

为了澄清，我说通常你使用哪个可能并不重要。有时，您可能特别想选择其中一个。如果您可以从头开始并希望使用基本字体大小并使所有内容都与之相关，那么 EM 会很好。

当您在现有代码库上进行重新设计并且需要 px 的特殊性来防止不良嵌套问题时，通常需要 PX。

于 2012-08-03T16:17:48.413 回答