我正在设计一个新网站，我希望它与尽可能多的浏览器和浏览器设置兼容。我正在尝试决定我应该为字体和元素的大小使用什么度量单位，但我无法找到一个确凿的答案。
我的问题是：我应该在我的 CSS 中使用 px 或 rem 吗？
极客观点
项目管理
HarmonyOS
px 与在浏览器中调整基本字体大小的用户不兼容。em s，因为与 rem s 相比，它们更难以维护，因为它们是级联的。rem 与分辨率无关，因此更可取。但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素，因此使用 px 不是问题。我问这个是因为对于 CSS 中最理想的距离度量有很多不同的意见，我不确定哪个是最好的。
原文由 user1218247 发布，翻译遵循 CC BY-SA 4.0 许可协议
我要赞扬 josh3736 的回答，因为它提供了一些极好的历史背景。虽然表达得很好，但自从提出这个问题以来，CSS 格局在近五年内发生了变化。当问这个问题时， px 是 正确的答案，但今天不再适用。
tl;博士： 使用 rem
历史上 px 单位通常代表一个设备像素。随着具有越来越高像素密度的设备，这不再适用于许多设备，例如 Apple 的 Retina Display。
--- rem 单位代表 根 大小。它是任何匹配的 --- font-size :root 。对于 HTML，它是 <html> 元素；对于 SVG，它是 <svg> 元素。每个浏览器*中的默认值 font-size 是 16px 。
px互联网上的大多数 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 ，这不是很方便。
remrem 的默认值 16px 并不是其使用的有力论据。写 0.0625rem 比写 0.75pt _更糟糕_，那么为什么有人会使用 rem ？
rem 相对于其他单位的优势有两部分。
px 的值 rem 更改为您想要的任何值多年来，浏览器缩放发生了很大变化。从历史上看，许多浏览器只会放大 font-size ，但是当网站意识到只要有人放大或缩小它们漂亮的像素完美设计就会崩溃时，这种情况就会迅速改变。此时，浏览器缩放整个页面，因此基于字体的缩放不在画面之列。
尊重用户的意愿并非不可能。仅仅因为浏览器默认设置为 16px ，并不意味着任何用户都不能将他们的偏好更改为 24px 或 32px 或能见度差（屏幕眩光）。如果您的单位基于 rem ，任何使用更高字体大小的用户都会看到一个比例更大的网站。边框会更大，填充会更大，边距会更大，一切都会流畅地扩大。
如果您将媒体查询基于 rem ，您还可以确保您的用户看到的网站适合他们的屏幕。 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 在 320px 宽浏览器上。 RWD 使用 rem 绝对没有损失。
px 值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正在更改 font-size ：
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
无论您做什么，都不 :root 元素的 font-size 设置为 px 值。
如果您将 font-size 上的 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 设置得太小，但有一个简单的解决方法：在 body -714 上设置 font-size --- 使用 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 预处理器，则可以使用混合或变量来管理媒体查询，这将完全掩盖问题。
不幸的是，Safari 有一个已知错误，其中对 :root 字体大小的更改实际上会更改媒体查询范围的计算值 rem 值。如果媒体查询中更改了 :root 元素的字体大小，这可能会导致一些非常奇怪的行为。幸运的是，修复很简单： 使用 em units for media queries 。
如果您在不同项目之间切换，很可能 rem 的表观字体大小将具有不同的值。在一个项目中，您可能使用表观大小 10px 而在另一个项目中表观大小可能是 1px 。这可能会造成混淆并导致问题。
我在这里唯一的建议是坚持使用 62.5% 将 --- 转换为 --- 10px rem 的表观大小，因为这在我的经验中更为常见。
如果您正在编写将在不受您控制的网站上使用的 CSS，例如用于嵌入式小部件，那么实际上没有什么好方法可以知道外观尺寸 rem 会有多大。如果是这种情况，请随时继续使用 px 。
如果您仍想使用 rem ，请考虑发布带有变量的 Sass 或 LESS 版本的样式表，以覆盖 rem 的表观大小的缩放比例。
\* 我不想吓到任何人远离使用 rem ，但我无法正式确认 每个 浏览器默认使用 16px 。你看，有很多浏览器，对于一个浏览器来说，稍微偏离一点并不难，比如 15px 或 18px 。但是，在测试中，我还没有看到一个示例，其中使用默认设置的系统中使用默认设置的浏览器具有 16px 以外的任何值。如果你找到这样的例子，请与我分享。
原文由 zzzzBov 发布，翻译遵循 CC BY-SA 4.0 许可协议
3 回答4.9k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.5k 阅读
3 回答2.1k 阅读
2 回答1k 阅读✓ 已解决
TL；DR： 使用
px。事实
px单位 不 等于一个物理显示像素。这 一直 是正确的——即使在 1996 年的 CSS 1 规范 中也是如此。CSS 定义了 _参考像素_，它测量 96 dpi 显示器上像素的大小。在 dpi 与 96dpi 显着不同的显示器（如 Retina 显示器）上，用户代理重新调整
px单位，使其大小与参考像素的大小匹配。换句话说，这种重新缩放正是 1 个 CSS 像素等于 2 个物理 Retina 显示像素的原因。也就是说，直到 2010 年（尽管存在移动缩放情况），
px几乎总是等于一个物理像素，因为所有广泛可用的显示器都在 96dpi 左右。em中指定的尺寸是相 _对于父元素的_。这导致了em的“复合问题”，其中嵌套元素逐渐变大或变小。例如：给我们：
rem始终仅相对于根html元素，现在 99.67% 的正在使用的浏览器都 支持。意见
我认为每个人都同意，将您的页面设计为适合所有人，并考虑到视障者是很好的。一个这样的考虑（但不是唯一的一个！）是允许用户使您的站点的文本更大，以便更容易阅读。
一开始，为用户提供缩放文本大小的唯一方法是使用相对大小单位（例如
ems）。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在px中指定字体大小，则在更改浏览器的字体大小选项时它们不会缩放。现代浏览器（甚至不那么现代的 IE7）都将默认缩放方法更改为简单地放大所有内容，包括图像和框大小。本质上，它们使参考像素变大或变小。
是的，仍然有人可以更改他们的浏览器默认样式表来调整默认字体大小（相当于旧式字体大小选项），但这是一种非常深奥的方法，我敢打赌没人会这样做。 （在 Chrome 中，它隐藏在高级设置、Web 内容、字体大小下。在 IE9 中，它更加隐藏。您必须按 Alt，然后转到查看、文本大小。）只需选择缩放选项就容易多了浏览器的主菜单（或使用
Ctrl++/-/鼠标滚轮）。1 - 自然在统计误差范围内
如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位大多无关紧要。如果所有内容都以相同的单位指定（图像均以像素为单位），则开发页面会容易得多，并且您不必担心复合。 （ “有人告诉我不会有数学运算” ——需要计算 1.5em 的实际结果。）
仅对字体大小使用相对单位的另一个潜在问题是用户调整大小的字体可能会破坏您的布局所做的假设。例如，这可能会导致文本被剪裁或运行时间过长。如果您使用绝对单位，则不必担心意外的字体大小会破坏您的布局。
所以我的答案是使用像素单位。我使用
px做所有事情。当然，您的情况可能会有所不同，如果您必须支持 IE6（请 RFC 之神怜悯您），无论如何您都必须使用ems。