我正在设计一个新的网站，我希望它能与尽可能多的浏览器和浏览器设置兼容。我试图决定我应该使用什么测量单位的字体和元素的大小，但我无法找到一个结论性的答案。
我的问题是:我应该在CSS中使用px还是rem ?
到目前为止，我知道使用px不兼容那些在浏览器中调整基本字体大小的用户。 我忽略了ems，因为与rem相比，它们在级联时维护起来更麻烦。 有人说rem是分辨率独立的，因此更可取。但也有人说，大多数现代浏览器对所有元素都一视同仁，所以使用px不是问题。
我问这个问题是因为关于CSS中最理想的距离度量有很多不同的意见，我不确定哪个是最好的。
当前回答
TL;DR:使用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.
意见
我想每个人都同意，设计你的页面是很好的，以适应每个人，并考虑到视力受损。其中一个需要考虑的问题(但不是唯一的!)是允许用户将网站的文本变大，这样就更容易阅读。
最初，为用户提供缩放文本大小的唯一方法是使用相对大小单位(例如ems)。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在px中指定字体大小，当更改浏览器的字体大小选项时，它们将不会缩放。
现代浏览器(甚至不那么现代的IE7)都改变了默认的缩放方法，只需要放大所有内容，包括图像和盒子大小。本质上，它们使参考像素变大或变小。
是的，有些人仍然可以改变他们的浏览器默认样式表来调整默认字体大小(相当于老式字体大小选项)，但这是一种非常深奥的方式，我敢打赌没有人会这样做。(在Chrome中，它被隐藏在高级设置、网页内容、字体大小下面。在IE9中，它更加隐蔽。你必须按Alt键，然后去查看，文本大小。)在浏览器的主菜单中选择缩放选项(或使用Ctrl++/-/鼠标滚轮)要容易得多。
1 -在统计误差之内，自然
如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位基本上是不相关的。当所有东西都指定在同一个单位(图像都以像素为单位处理)时，开发页面要容易得多，而且不必担心复合。(“我被告知没有数学”——要计算1.5em实际是多少。)
仅使用相对单位表示字体大小的另一个潜在问题是，用户调整字体大小可能会破坏布局的假设。例如，这可能会导致文本被剪切或运行太长。如果你使用绝对单位，你不必担心意外的字体大小会破坏你的布局。
所以我的答案是使用像素单位。所有都用px表示。当然，您的情况可能会有所不同，如果您必须支持IE6(愿rfc之神宽恕您)，那么无论如何您都必须使用ems。
其他回答
是的。或者，更确切地说，没有。
呃，我是说，没关系。使用对您的特定项目有意义的方法。PX和EM或两者都有效，但根据整个页面的CSS架构的不同，它们的行为会有所不同。
更新:
为了澄清，我的意思是，通常情况下，使用哪一种并不重要。有时，您可能特别希望选择其中一种。如果你可以从头开始，想要使用基本字体大小，并使所有内容都与之相关，那么EMs是很好的。
当您在现有代码基础上进行重新设计时，通常需要px，并且需要px的专一性来防止糟糕的嵌套问题。
是的，REM和PX是相对的，但其他答案建议选择REM而不是PX，我也想用一个可访问性的例子来支持这一点。 当用户在浏览器上设置不同的字体大小时，REM会自动放大或缩小网页上的字体、图像等元素，而PX则不会。
在下面的gif中，左侧文本使用REM单位设置字体大小，而右侧字体使用PX单位设置。
正如你所看到的，当我调整大小时，REM会自动放大/缩小 网页的默认字体大小。(右下方)
网页的默认字体大小是16px，等于1 rem(只适用于默认的html页面，即html{font-size:100%})，因此，1.25rem等于20px。
附注:还有谁在使用REM?CSS框架!像Bootstrap 4, Bulma CSS等，所以最好与它相处。
我想赞扬josh3736的回答提供了一些优秀的历史背景。虽然这个问题已经很清楚地表达出来了，但自从这个问题被提出以来，CSS的前景在近五年内已经发生了变化。当这个问题被问到时，px是正确答案，但今天它不再成立。
Tl;dr:用rem
单位概述
历史上，px单位通常代表一个设备像素。随着设备的像素密度越来越高，这种方法不再适用于许多设备，比如苹果的Retina Display。
Rem单位代表根em大小。它是匹配root的字体大小。在HTML的情况下，它是< HTML >元素;对于SVG，它是< SVG >元素。每个浏览器的默认字体大小*是16px。
关于使用px
互联网上的大多数CSS示例都使用px值，因为它们是事实上的标准。Pt, in和其他各种单位在理论上都可以使用，但它们不能很好地处理小的值，因为你很快就需要求助于分数，这需要更长时间输入，而且很难推理。
如果你想要一个细边框，px你可以使用1px, pt你需要使用0.75pt来获得一致的结果，这不是很方便。
关于rem的使用
Rem的默认值16px并不是一个很好的使用理由。写入0.0625rem比写入0.75pt更糟糕，那么为什么有人会使用rem呢?
雷姆与其他单位相比有两方面的优势。
尊重用户偏好 你可以随意改变rem的表观px值
尊重用户偏好
多年来，浏览器缩放功能发生了很大变化。从历史上看，许多浏览器只会扩大字体大小，但当网站意识到他们漂亮的像素完美设计在任何时候都被放大或缩小时就会被破坏时，这种情况就会迅速改变。此时，浏览器会缩放整个页面，因此基于字体的缩放就不存在了。
尊重用户的意愿并不是不可能的。仅仅因为浏览器默认设置为16px，并不意味着任何用户不能将首选项更改为24px或32px以纠正低视力或低能见度(例如屏幕眩光)。如果您以rem为单位，那么任何字体大小较高的用户都会看到相应较大的站点。边界会更大，填充会更大，边际会更大，一切都将流动地扩大。
如果您的媒体查询基于rem，您还可以确保您的用户看到的网站适合他们的屏幕。如果用户在640px宽的浏览器上将字体大小设置为32px，那么在320px宽的浏览器上，用户将有效地看到以16px宽的字体显示的站点。在使用rem时，响应式网页设计(RWD)绝对没有损失。
改变表观px值
因为rem是基于:根节点的字体大小，如果你想改变1rem所代表的东西，你所要做的就是改变字体大小:
:根{ 字体大小:100 px; ｝ 身体{ 字体大小:1快速眼动; ｝ <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%
:根{ 字体大小:125%; } 如果你使用默认的字体大小，我是20px高
用20的倍数来做所有事情并不是很好，但一个常见的建议是让rem的表观大小等于10px。神奇的数字是10/16，也就是0.625，即62.5%。
:根{ 字体大小:62.5%; ｝ 如果你使用默认的字体大小，我是10px高
现在的问题是，页面其余部分的默认字体大小设置得太小了，但有一个简单的解决方法:使用rem设置正文的字体大小:
:根{ 字体大小:62.5%; ｝ 身体{ 字体大小:1.6快速眼动; ｝ 我是默认的字体大小</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的值取决于是否应用media-query，而media查询取决于rem的值，那么到底发生了什么?
rem在媒体查询中使用font-size的初始值，并且不应该(参见Safari部分)考虑:root元素的font-size可能发生的任何变化。换句话说，它的表观值总是16px。
这有点烦人，因为这意味着您必须进行一些分数计算，但我发现大多数常见的媒体查询已经使用了16的倍数的值。
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
此外，如果你正在使用CSS预处理器，你可以使用mixin或变量来管理你的媒体查询，这将完全掩盖问题。
Safari
不幸的是，Safari有一个已知的bug，更改:root font-size实际上会更改媒体查询范围的计算rem值。如果在媒体查询中改变了:root元素的font-size，则会导致一些非常奇怪的行为。幸运的是，解决方法很简单:使用em单位进行媒体查询。
上下文切换
如果您在不同的项目之间切换，rem的表观字体大小很可能具有不同的值。在一个项目中，你可能会使用10px的表观大小，而在另一个项目中，表观大小可能是1px。这可能会让人困惑并导致问题。
在这里，我唯一的建议是坚持使用62.5%来将rem转换为10px的表观大小，因为在我的经验中，这是更常见的。
共享CSS库
如果您编写的CSS将用于您无法控制的站点，例如嵌入式小部件，那么实际上没有好方法知道rem的表观大小。如果是这种情况，可以继续使用px。
如果您仍然想使用rem，可以考虑使用一个变量发布样式表的Sass或LESS版本，以覆盖rem表观大小的缩放。
*我不想吓走任何人使用rem，但我还不能正式确认每个浏览器默认使用16px。你看，有很多浏览器，对于一个浏览器来说，稍微偏离15px或18px并不难。然而，在测试中，我还没有看到一个使用默认设置的浏览器在使用默认设置的系统中有16px以外的值的例子。如果你发现了这样的例子，请分享给我。
TL;DR:使用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.
意见
我想每个人都同意，设计你的页面是很好的，以适应每个人，并考虑到视力受损。其中一个需要考虑的问题(但不是唯一的!)是允许用户将网站的文本变大，这样就更容易阅读。
最初，为用户提供缩放文本大小的唯一方法是使用相对大小单位(例如ems)。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在px中指定字体大小，当更改浏览器的字体大小选项时，它们将不会缩放。
现代浏览器(甚至不那么现代的IE7)都改变了默认的缩放方法，只需要放大所有内容，包括图像和盒子大小。本质上，它们使参考像素变大或变小。
是的，有些人仍然可以改变他们的浏览器默认样式表来调整默认字体大小(相当于老式字体大小选项)，但这是一种非常深奥的方式，我敢打赌没有人会这样做。(在Chrome中，它被隐藏在高级设置、网页内容、字体大小下面。在IE9中，它更加隐蔽。你必须按Alt键，然后去查看，文本大小。)在浏览器的主菜单中选择缩放选项(或使用Ctrl++/-/鼠标滚轮)要容易得多。
1 -在统计误差之内，自然
如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位基本上是不相关的。当所有东西都指定在同一个单位(图像都以像素为单位处理)时，开发页面要容易得多，而且不必担心复合。(“我被告知没有数学”——要计算1.5em实际是多少。)
仅使用相对单位表示字体大小的另一个潜在问题是，用户调整字体大小可能会破坏布局的假设。例如，这可能会导致文本被剪切或运行太长。如果你使用绝对单位，你不必担心意外的字体大小会破坏你的布局。
所以我的答案是使用像素单位。所有都用px表示。当然，您的情况可能会有所不同，如果您必须支持IE6(愿rfc之神宽恕您)，那么无论如何您都必须使用ems。
作为条件反射的回答，我建议使用rem，因为它允许您在必要时一次性更改整个文档的“缩放级别”。在某些情况下，当您希望大小相对于父元素时，请使用em。
但是对rem的支持是参差不齐的，IE8需要一个填充物，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;
}
