Question

我想知道为什么 Boostrap 为 Boostrap 4 的新版本选择rem和em而不是px。< / p>

一些变量示例：

    $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，所有字体大小都相对于根元素（aka，the   html标签）。这样做的原因是为了更容易扩展或缩小设备。从技术上讲，你可以将html标签更改为更小或更大的尺寸，以平等地扩展所有字体大小 - 这是一个非常好的功能。

... [T]他最重要的东西是一切都是动态的   相对于根HTML标记。

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

来源：Scotch.io

Answer 2

值得一提的是，Bootstrap 4在px而非em中保留了断点。来自docs：

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

Answer 3

不久前我改用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）

但是'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进行全宽显示时，我可以将所有内容排列成一个完美的网格。

希望这会有所帮助。

Answer 4

其他答案在这里缺少一个要点。使用 rem 可以更改根上的字体大小（通常是 html 元素）以更改所有网站文本的字体大小，这是正确的。从这个意义上说，rem 为网页设计师提供了更改整个网站字体大小的灵活性。但这也可以通过新的 css 变量来实现。例如

:root{--my-font: 16px} 
div {font-size: calc(var(--my-font)*2)}

显然 IE 支持需要使用 rem 而不是 var()。使用 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

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

4 个答案: