为什么Bootstrap 4选择rem和em而不是px？

Question

我想知道为什么Boostrap选择rem而em不是px新版本的Boostrap 4.

我们可以在这看到

一些变量示例:

    $font-size-h1: 2.5rem !default;
    $font-size-h2: 2rem !default;
    $font-size-h3: 1.75rem !default;
    $mark-padding: .2em !default;

使用em和rem是一个很好的做法:

  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;

我只是好奇我在网上找不到这个,所以我要问的原因.

Answer 1

使用rem,所有字体大小都相对于根元素(也就是html标记).这样做的原因是为了更容易扩展或缩小设备.从技术上讲,您可以将html标记更改为更小或更大的大小,以均等地缩放所有字体大小 - 这是一个非常好的功能.

... [T]他主要的东西是一切都是动态的,并且相对于根HTML标签.

例如,将html css字体大小更改为其他数字...并观察整个网格如何调整和缩放.

资料来源:Scotch.io

Answer 2

值得一提的是,Bootstrap 4保留了断点px而不是断点em.来自文档:

虽然Bootstrap使用ems或rems来定义大多数大小,但px用于网格断点和容器宽度.这是因为视口宽度以像素为单位,并且不随字体大小而变化.

Answer 3

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

Rems 是 100% 可扩展的，我根据在笔记本电脑及以下设备上看起来不错的内容来确定所有大小，然后在 1600px 媒体查询或更大时，调整 html 字体大小和中提琴！，整个站点按比例“放大”100%。

我现在也开始合并 vw 用于需要像英雄部分那样变大的部分填充和字体，将其与 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 and (min-width: 1680px)

但是 'max-width' 可以是 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 的全宽部分，我可以让所有东西都排列成一个完美的网格。

希望这可以帮助。