Html 为什么 Bootstrap 4 选择 rem 和 em 而不是 px？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37051697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why Bootstrap 4 choose rem and em instead px?
提问by raduken
I would like know why Boostrapchoose remand eminstead pxfor the new version of Boostrap 4.
我想知道为什么自举选择rem和em替代px的新版本的自举4。
Some variables examples:
一些变量示例：
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$mark-padding: .2em !default;
It's a good practice use emand remfor:
将em和rem用于：
margin: 0;
padding: 0;
bottom: 0px;
width: 100%;
I am just curious about that I could not find on web about this so that reason I am asking.
我只是好奇我在网上找不到关于这个的原因，所以我要问。
回答by isherwood
REMs are useful almost anywhere size is explicitly set.
REM 几乎在任何明确设置大小的地方都很有用。
With rem, all font sizes are relative to the root element (aka, the html tag). The reason for this is to make it easier to scale up or down for devices. You could technically change the html tag to a smaller or larger size to scale all font sizes equally – which is a super nice feature.
... [T]he main thing to take-away is everything is dynamic and relative to the root HTML tag.
For example, change the html css font-size to a different number ... and watch how the entire grid adjusts and scales.
使用 rem，所有字体大小都相对于根元素（也就是 html 标签）。这样做的原因是为了更容易地扩大或缩小设备。从技术上讲，您可以将 html 标签更改为更小或更大的尺寸，以同等地缩放所有字体大小——这是一个非常好的功能。
... [T]他要带走的主要内容是一切都是动态的，并且相对于根 HTML 标签。
例如，将 html css font-size 更改为不同的数字......并观察整个网格如何调整和缩放。
Source: Scotch.io
资料来源：Scotch.io
回答by Kostas Siabanis
It is worth mentioning that Bootstrap 4 kept breakpoints in pxand not em. From the docs:
值得一提的是，Bootstrap 4 保留了断点，px而不是em. 从文档：
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
Bootstrap 使用 em 或 rems 来定义大多数大小，而 px 用于网格断点和容器宽度。这是因为视口宽度以像素为单位，不随字体大小而变化。
回答by Jamie Mitchell
I switched to using rems instead of px a while back, I can tell ya it was the best choice.
不久前我改用 rems 而不是 px，我可以告诉你这是最好的选择。
Rems are 100% scalable, I base all my sizing on what looks good on a laptops and below, then at 1600px media query or greater, adjust the html font size and viola!, the entire site "scales up" 100% proportionally.
Rems 是 100% 可扩展的，我根据在笔记本电脑及以下设备上看起来不错的内容来确定所有大小，然后在 1600px 媒体查询或更大时，调整 html 字体大小和 viola！，整个站点按比例“放大”100%。
I'm starting to incorporated vw now too for section paddings and fonts that need to go big like that found in hero sections, combine this with calc for example calc(3rem + 2vw) and you've got a seriously scalable website with minimal media queries.
我现在也开始合并 vw 用于需要像英雄部分那样变大的部分填充和字体，将其与 calc 结合，例如 calc(3rem + 2vw)，您就拥有了一个可扩展的网站，并且具有最少的媒体查询。
When using rems, you need to reset your html font size to 16px.
使用 rems 时，需要将 html 字体大小重置为 16px。
html {
font-size: 62.5%;
}
now, 1rem = 10px
现在，1rem = 10px
so sizing everything is super easy to convert.
所以调整一切都非常容易转换。
30px is now 3rem, 25px is now 2.5rem, 15px is now 1.5rem and so on.
30px 现在是 3rem，25px 现在是 2.5rem，15px 现在是 1.5rem，依此类推。
Then on larger screens, change the html to say font-size: 70%, and everything will beautifully scale up.
然后在更大的屏幕上，将 html 更改为 font-size: 70%，一切都会漂亮地放大。
Be sure to use px for media queries like: @media only screen and (min-width: 1680px)
请务必使用 px 进行媒体查询，例如：@media only screen and (min-width: 1680px)
But 'max-width' can be either px or rems, just depends on the design.
但是 'max-width' 可以是 px 或 rems，这取决于设计。
I set my wraps now to 90vw, this prevents anything from touching the screen edge and is and 100% scalable.
我现在将包裹设置为 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.
你也可以使用 % ，但是使用 WP Gutenberg 和使用 vw 的全宽部分，我可以让所有东西都排列成一个完美的网格。
Hope this helps.
希望这可以帮助。
