我要赞扬josh3736提供了一些出色的历史背景。尽管提出了明确的要求，但自提出此问题以来的近五年来，CSS格局发生了变化。当问这个问题时，px 是正确的答案，但今天不再适用。
tl; dr：使用rem
单位概述
历史上，px单位通常代表一个设备像素。对于像素密度越来越高的设备，这不再适用于许多设备，例如Apple的Retina Display。
rem单位代表- [R OOT EM大小。这font-size是任何比赛的结果:root。就HTML而言，它是<html>元素。对于SVG，这是<svg>元素。font-size每个浏览器* 的默认值为16px。
在撰写本文时，rem约有98％的用户支持。如果您担心另外2％的情况，我会提醒您，大约98％的用户也支持媒体查询。
关于使用 px
互联网上的大多数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-sizepx
如果将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页面其余部分的默认设置设置得太小了，但是有一个简单的解决方法：使用设置font-size启用：bodyrem
: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预处理器，则可以使用mixin或变量来管理媒体查询，这将完全掩盖该问题。
苹果浏览器
不幸的是，Safari有一个已知的错误，即更改:root字体大小确实会更改rem媒体查询范围的计算值。如果在:root媒体查询中更改了元素的字体大小，这可能会导致某些非常奇怪的行为。幸运的是，修复很简单：使用em单位进行媒体查询。
上下文切换
如果您在各种不同的项目之间切换，则的外观字体大小很有可能rem会具有不同的值。在一个项目中，您可能使用的视在大小10px在另一个项目中的视在大小可能为1px。这可能会造成混乱并引起问题。
我在这里的唯一建议是坚持使用62.5%转换rem为的大小10px，因为在我的经验中这更常见。
共享的CSS库
如果您要编写将在您无法控制的网站（例如嵌入式窗口小部件）上使用的CSS，则实际上没有很好的方法来知道其外观大小rem。如果是这样，请随时使用px。
如果仍然要使用rem，请考虑使用变量释放Sass或LESS版本的样式表，以覆盖的视在大小rem。
*我不想吓到任何人不要使用rem，但是我还不能正式确认每个浏览器16px默认都在使用。您会发现，有许多浏览器，并且一个浏览器与15px或说的差异如此之小也不难18px。但是，在测试中，我没有看到一个示例，其中使用默认设置的系统中使用默认设置的浏览器具有以外的任何值16px。如果您找到这样的例子，请与我分享。
