值得一提的是，Bootstrap 4保留断点px而不保留断点em。从文档：

Bootstrap使用ems或rems定义大多数大小，而pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不会随字体大小而变化。

不久前我改用rems而不是px，我可以告诉你这是最好的选择。

Rems具有100％的可扩展性，我的尺寸全部基于笔记本电脑及以下产品的外观，然后在1600px或更高的媒体查询条件下，调整html字体大小和中提琴！，整个网站将按比例“放大” 100％。

我现在也开始整合大众汽车，以增加需要像英雄部分中所显示的那样大的部分填充和字体，将其与calc结合使用，例如calc（3rem + 2vw），您便拥有了一个可扩展性非常强的网站，只需很少的媒体查询。

使用rems时，您需要将html字体大小重置为16px。

html {
    font-size: 62.5%;
}

现在，1rem = 10px

因此，调整大小都非常容易转换。

30px现在是3rem，25px现在是2.5rem，15px现在是1.5rem，依此类推。

然后在更大的屏幕上，将html更改为font-size：70％，一切都会按比例放大。

确保对媒体查询使用px，例如：@media only screen和（最小宽度：1680px）

但是“最大宽度”可以是px或rems，仅取决于设计。

我现在将wraps设置为90vw，这可以防止任何东西触摸屏幕边缘，并且可以100％缩放。

.wrap {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    max-width: 145rem; /* or use px depending on the design */
}

You can use % too, but with WP Gutenberg out and their full width sections using vw I can get everything to line up to a perfect grid.

Hope this helps.

REM在几乎任何明确设置大小的地方都非常有用。

使用rem，所有字体大小都相对于根元素（又称为html标记）。这样做的原因是为了简化设备的放大或缩小。您可以从技术上将html标记更改为较小或较大的大小，以均等缩放所有字体大小，这是一个非常好的功能。

... [要了解的主要内容是，所有内容都是动态的，并且相对于根HTML标记而言。

例如，将html css font-size更改为其他数字...并观察整个网格如何调整和缩放。

资料来源：Scotch.io