我正在设计一个新的网站，希望它与尽可能多的浏览器和浏览器设置兼容。我正在考虑使用哪种度量单位来设定字体和元素的大小，但是找不到结论性的答案。
我的问题是：在我的CSS中应该使用px还是rem？
px不能与在其浏览器中调整基础字体大小的用户兼容。em，因为相比rem，它们更难维护，而且会出现级联的问题。rem是分辨率无关的，因此更受欢迎。但其他人说，大多数现代浏览器会等比缩放所有元素，因此使用px也没有问题。我提出这个问题是因为有很多不同的意见，关于在CSS中最理想的距离测量方式是什么，我不确定哪一种最好。
简述：使用px。
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 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.
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.
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:
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 now supported on 99.67% of all browsers in use.
我认为每个人都同意，将页面设计得适合所有人，并考虑视觉障碍者是好的。其中一种考虑（但不是唯一的！）是允许用户放大站点文本，以便更容易阅读。
起初，提供用户缩放文本大小的唯一方法是使用相对大小单位（例如em）。这是因为浏览器的字体大小菜单只是更改根字体大小。因此，如果您使用px指定字体大小，则在更改浏览器的字体大小选项时它们不会缩放。
现代浏览器（甚至是不那么现代的IE7）都将默认缩放方法更改为简单地放大一切，包括图像和框尺寸。基本上，它们使参考像素变大或变小。
是的，某人仍然可以更改其浏览器默认样式表以调整默认字体大小（相当于旧式字体大小选项），但这是一种非常神秘的方法，我敢打赌没有人这样做。（在Chrome中，它被隐藏在高级设置、Web内容、字体大小下。在IE9中，它甚至更加隐蔽。您必须按Alt键，然后转到查看、文本大小。）使用浏览器主菜单中的缩放选项（或使用Ctrl+ / - /鼠标滚轮）要容易得多。如果我们假设大多数用户使用缩放选项来缩放页面，则我认为相对单位基本上无关紧要。当所有内容都以相同的单位指定时（图像都以像素处理），开发页面会更容易，而且您不必担心复合问题。（“我被告知不需要数学”——需要处理计算1.5em实际上是多少像素。）
使用相对单位作为字体大小的唯一问题之一是，用户调整字体大小可能会破坏您布局所做出的假设。例如，这可能导致文本被剪切或过长。如果您使用绝对单位，则无需担心意外的字体大小破坏布局。div { font-size:0.5em; }
看起来非常糟糕...
font-size 应该只给文本标签...你只需要处理例如：
li { font-size:1.2em } li li { font-size:1.em }
在 DIV 标签中，你要给 font-size 百分比的值，以便准确缩放 DIV 中的文本.... 而且使用类，而不是 "div"。 - SLV我想表扬josh3736的答案，他提供了一些出色的历史背景。虽然表述清晰，但自这个问题被提出以来，CSS的情况已经发生了改变。当这个问题被提出时，px是正确的答案，但今天不再是这样了。
简而言之：使用rem
历史上，px单位通常代表一个设备像素。随着设备像素密度越来越高，这对于许多设备（例如苹果的Retina显示屏）不再适用。
rem单位表示根 em大小。它是与:root匹配的任何内容的font-size。在HTML的情况下，它是<html>元素；对于SVG，它是<svg>元素。每个浏览器*中的默认font-size为16px。
px互联网上的大多数CSS示例都使用px值，因为它们是事实上的标准。理论上可以使用pt、in和其他各种单位，但是它们在处理小值时效果不佳，因为您很快就需要使用分数，这些分数输入更长，且更难以理解。
px 可以使用 1px，而使用 pt 需要使用 0.75pt 来保持一致的结果，这并不是很方便。
remrem 的默认值为 16px 并不能成为其使用的强有力的理由。写 0.0625rem 比写 0.75pt 更糟糕，那么为什么会有人使用 rem 呢？
rem 相对于其他单位有两个优势。
rem 的表现 px 值字体大小，但是当网站意识到他们美丽的像素完美设计在用户缩放时会出现问题时，这种情况迅速改变了。此时，浏览器会缩放整个页面，因此基于字体的缩放已经不再适用。16px，并不意味着任何用户不能更改其首选项为24px或32px以纠正低视力或视力差（例如屏幕反光）。如果您的单位基于rem，则任何使用更高字体大小的用户都将看到比例更大的网站。边框将更大，填充将更大，边距将更大，所有内容都会流畅地缩放。rem设置媒体查询，您还可以确保用户看到的网站适合他们的屏幕。在宽度为640px的浏览器上将font-size设置为32px的用户，实际上将看到您网站中320px宽浏览器上16px大小的用户所看到的内容。在使用rem时，响应式网页设计（RWD）不会有任何损失。
px的值因为rem基于:root节点的font-size，如果要更改1rem表示的内容，只需更改font-size即可：
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}<p>Don't ever actually do this, please</p>:root元素的font-size设置为px值。html上的font-size设置为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>rem在body上设置font-size。
: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部分）考虑对:root元素的font-size进行的任何更改。换句话说，它的实际值始终为16px。
这有点烦人，因为这意味着你必须进行一些小数计算，但我发现大多数常见的媒体查询已经使用了16的倍数值。
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
:root字体大小的更改实际上会更改计算出的媒体查询范围的rem值。如果在媒体查询中更改:root元素的字体大小，则可能会导致一些非常奇怪的行为。幸运的是，修复方法很简单：使用em单位进行媒体查询。rem的表观字体大小可能具有不同的值。在一个项目中，您可能会使用看起来像10px的表观大小，在另一个项目中，表观大小可能是1px。这可能会导致混淆和问题。62.5％将rem转换为表观大小为10px，因为在我的经验中，这更为常见。
如果你正在编写 CSS，将其用于一个你无法控制的网站上，例如嵌入式小部件，那么很难知道 rem 的大小。如果是这种情况，请继续使用 px。
如果你仍然想使用 rem，可以考虑发布一个 Sass 或 LESS 版本的样式表，并提供一个变量来覆盖 rem 大小的缩放。
* 我不想吓到任何人使用rem，但我无法正式确认每个浏览器都默认使用16px。你知道，有很多浏览器，其中一个浏览器稍微偏离一点，比如说15px或18px，这并不难。然而，在测试中，我没有看到一个浏览器在使用默认设置的系统中使用默认设置时具有16px以外的任何值。如果您发现这样的例子，请与我分享。
px的浏览器的2%的人，这是为什么呢？使用缩放网页的人所占比例很小，并且其中还有缩放并更改根字体大小的人的比例更小，可能远少于2%的人。这讲不通吗？你说我们应该照顾极少数的人，同时忽略使用rem的2%的人。 - ICWpx值，但如果您在rem中定义边框宽度，则这些值将被缩放。在某些情况下，这可能会影响您想要使用的单位。Chrome/Blink总是同时缩放两者。 - Mikko Rantalainen这篇文章相当详细地描述了使用px、em和rem的优缺点。
作者最终得出结论，最好的方法可能是同时使用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 */
px。至于元素的单位，坚持使用 px 会更好，因为通常你会想要精确地调整元素的大小。 - uzynpx的原因是为了实现调整大小。现在，如果我们使用rem，我们仍然必须提供px回退（在旧版浏览器中）。本质上，这意味着px可调整大小的支持比rem更好。新版浏览器支持px大小调整，对于旧版浏览器，我们无论如何都会回退到px。
基于这个结论，我非常想知道，为什么要使用rem？如果我可以看到隧道尽头的光明。 - fusionstrings是的，REM和PX是相对单位，但其他回答建议使用REM而不是PX。我也想用一个无障碍的例子来支持这个观点。当用户在浏览器上设置不同的字体大小时，REM会自动缩放网页上的元素（如字体、图像等），而PX则不会。
在下面的gif中，左侧文本使用字体大小的REM单位进行设置，而右侧文本则使用PX单位进行设置。
你可以看到，当我调整网页默认字体大小时，REM会自动缩放。（右下角）
网页的默认字体大小是16px，等于1个rem（只适用于默认的HTML页面即html{font-size:100%}）。因此，1.25rem等于20px。
附言：谁还在使用REM？像Bootstrap 4、Bulma CSS等CSS框架！所以最好跟上潮流。
josh3736的回答很不错，但是三年后提供一个对立的观点：
如果只是为了让开发人员更容易更改字体大小，我建议使用rem单位。虽然用户很少更改浏览器中的默认字体大小，并且现代浏览器缩放会放大px单位，但如果你的老板告诉你“不要放大图像或图标，但要将所有字体都变大”，那么只需更改根字体大小，让其他所有字体相对于它进行缩放，比更改数十或数百个CSS规则中的px大小更容易。
我认为在某些图像或某些布局元素上仍然使用px单位是有意义的，因为无论设计的比例如何，它们的大小始终应该保持不变。
Caniuse.com可能在josh3736在2012年发布回答时只支持75％的浏览器，但截至3月27日，他们声称支持93.78％。在他们跟踪的浏览器中，只有IE8不支持它。
html {
}
body {
font-size:14px;
}
.someElement {
width: 12px;
}
html {
font-size:1px;
}
body {
font-size:14rem;
}
.someElement {
width: 12rem;
}
pt与rem类似，它相对固定，但几乎总是与DPI无关，即使非兼容浏览器以设备相关方式处理px。 rem随根元素的字体大小变化而变化，但您可以使用类似Sass/Compass的工具自动使用pt。
如果您有以下内容：
html {
font-size: 12pt;
}
1rem将始终为12pt。 rem和em只有在它们所依赖的元素上是设备无关的; 一些浏览器不按规范行事，并且字面上处理px。 即使在Web的早期，1点始终被视为1/72英寸--也就是说，1英寸中有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显示器上进行测试。我发现编写网站字体大小的最佳方法是为 body 定义一个基础字体大小，然后在声明其他 font-size 后使用 em（或 rem）。这可能是个人偏好，但它为我服务得很好，也使得更容易地实现 响应式设计。
至于使用 rem 单位，我认为在代码中寻找进步与为旧浏览器提供支持之间要找到平衡。查看此链接以了解 rem 单位的浏览器支持情况，这应该对您的决策有所帮助。
半个（但仅仅是半个）讽刺的回答（另一半是对官僚主义现实的痛恨）：
使用vh
始终根据浏览器窗口大小设置大小。
始终允许向下滚动，但禁用水平滚动。
将body宽度设置为静态的50vh，并且永远不编写css以使其漂浮或打破父div。 （如果他们尝试模拟看起来像这样的东西，巧妙地使用背景gif可以使他们偏离轨道。）并且仅使用表格进行样式设计，以便所有内容都被牢牢地固定在预期位置上。包括一个JavaScript函数，以撤消用户可能执行的任何ctrl +/- 活动。
用户会讨厌你，因为网站不会根据他们正在使用的设备而有所不同（例如，在手机上文字太小无法阅读）。你的同事会讨厌你，因为没有理智的人会这样做，而且它很可能会破坏他们的工作（但不会破坏你的工作）。你的编程教授会讨厌你，因为这不是个好主意。你的用户体验设计师会讨厌你，因为它将揭示他们在设计UX模型时缩短时间的角落。
几乎每个人都会讨厌你，除了那些告诉你要快速地将事情与模型匹配的人。然而，这些人（通常包括项目经理）会对你的准确性和快速周转时间感到非常兴奋。而且每个人都知道他们的意见是对你的薪水最重要的。是的。或者说，不是。
嗯，我的意思是，这并不重要。使用适合您特定项目的那个。PX和EM都是有效的，但根据整个页面的CSS架构会有所不同。
更新：
澄清一下，我想说的是通常情况下使用哪种方式可能并不重要。有时，您可能需要明确选择其中之一。如果您可以从头开始并想使用基本字体大小并使所有内容相对于该大小进行调整，则EM很好。
PX通常需要在将重新设计应用于现有代码库并需要px的特定性以防止错误嵌套问题时使用。