我想知道Bootstrap 4为什么选择使用rem和em而不是px。
我们可以在项目中的variables.css文件中看到一个例子：
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$mark-padding: .2em !default;
我在网上找不到开发人员对此的任何解释。他们解释过为什么在任何地方做出这个决定吗？
REMs几乎在明确设置大小的任何地方都很有用。
使用rem，所有字体大小都与根元素（也就是html标签）。这样做的原因是为了更容易对设备进行放大或缩小。从技术上讲，您可以将html标记更改为更小或更大的大小，以平等地缩放所有字体大小——这是一个非常好的功能。
[T] 最重要的是一切都是动态的相对于根HTML标记。
例如，将html css字体大小更改为不同的数字。。。观察整个网格是如何调整和缩放的。
来源：Scotch.io
值得一提的是，Bootstrap 4在px而不是em中保留了断点。来自文档：
虽然Bootstrap使用ems或rems来定义大多数大小，但pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位，不随字体大小而变化。
我不久前改用rems而不是px，我可以告诉你这是最好的选择。
Rems是100%可扩展的，我所有的尺寸都基于笔记本电脑及以下电脑上看起来不错的尺寸，然后在1600像素或更高的媒体查询下，调整html字体大小和中提琴！，整个网站按比例"放大"100%。
我现在也开始将vw融入到需要像英雄部分那样变大的部分填充和字体中，将其与calc（3rem+2vw）相结合，你就有了一个可扩展性很强的网站，媒体查询量很小。
使用rems时，您需要将html字体大小重置为16px。
html {
font-size: 62.5%;
}
现在，1rem=10px
因此，调整所有大小都非常容易转换。
30px现在是3rem，25px现在是2.5rem，15px现在是1.5rem，依此类推
然后在更大的屏幕上，将html更改为字体大小：70%，所有内容都会按比例放大。
请确保将px用于媒体查询，如：@media-only屏幕和（最小宽度：1680px）
但"最大宽度"可以是px或rems，这取决于设计。
我现在将包装设置为90vw，这样可以防止任何东西接触屏幕边缘，并且可以100%扩展。
.wrap {
margin-left: auto;
margin-right: auto;
width: 90vw;
max-width: 145rem; /* or use px depending on the design */
}
你也可以使用%，但有了WP Gutenberg和他们使用vw的全宽部分，我可以让所有东西都排成一个完美的网格。
希望这能有所帮助。
其他答案缺少一个要点。使用rem，您可以更改根上的字体大小（通常是html元素）来更改所有网站文本的字体大小，这是正确的。从这个意义上说，rem为网站设计者提供了改变整个网站字体大小的灵活性。但这也可以通过新的css变量来实现。例如
:root{--my-font: 16px}
div {font-size: calc(var(--my-font)*2)}
使用rem的第二个也是更重要的原因如下：
第二个原因：如果用户愿意，可以只使用ctrl +来增加大小，是吗？是的，他们可以。但是我们需要考虑另一种情况。用户可以通过浏览器设置更改浏览器的默认字体大小，例如，在chrome中，转到chrome://settings/appearance，您可以为所有网站设置root字体大小。这样做的结果是所有字体大小为em或rem的网站都会受到影响，但字体大小为px的网站不会受到影响。这是引导程序从px单元切换到rem单元的另一个主要原因。
更改浏览器默认字体并运行以下示例以查看它：
.one {
font-size: 24px;
}
.two {
font-size: 1.5em;
}
.three {
font-size: 1.5rem;
}<div class="one">I will stay the same, no matter what default browser font settings are</div></br>
<div class="two">I will change in size if you change your browser's default font size.</div></br>
<div class="three">I will change in size as well just like div.two</div>折射率：
https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/?ref=heydesigner