Bootstrap 4 - 覆盖断点 - 转换为 em答案

【问题标题】：Bootstrap 4 - Override breakpoints - Convert to emBootstrap 4 - 覆盖断点 - 转换为 em
【发布时间】：2019-03-21 21:42:34
【问题描述】：

我正在尝试覆盖默认的 Bootstrap 4 (v4.1.3) 断点并将它们转换为 ems。

我首先用以下内容覆盖 $grid-breakpoints 变量：

$grid-breakpoints: (
    xs: 0,
    sm: 36.000em,
    md: 48.000em,
    lg: 62.000em,
    xl: 75.000em
);

但是，当我尝试编译时，我收到以下错误：

Message:
    assets/sass/vendor/bootstrap/mixins/_breakpoints.scss
Error: Incompatible units: 'px' and 'em'.
        on line 42 of assets/sass/0.vendor/bootstrap/mixins/_breakpoints.scss
>>   @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

他们的其中一个 mixin 在其计算中使用 px 似乎存在问题。

关于如何解决此问题的任何想法？

【问题讨论】：

没有重新定义_breakpoints.scss的简单方法
是的，这就是我想要避免的问题。不过，我似乎别无选择。刚刚有一个客户抱怨，我意识到这是因为她将她的操作系统设置为将字体缩放为 125%，这使得媒体查询以意想不到的方式运行。

标签： bootstrap-4 sass media-queries

【解决方案1】：

该错误准确地告诉您出了什么问题。 _breakpoints.scss 的行 42 是：

@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

如果您想使用 em，请确保替换所有 px 实例。

【讨论】：

是的，我明白了，谢谢。我只是想避免编辑原始的 Bootstrap 文件，但这似乎是不可能的。谢谢你的回答。
如果您同意，请考虑支持我的最新答案，如果您不同意，请添加评论。

【解决方案2】：

为了覆盖 Bootstrap 媒体查询，您别无选择，只能编辑 Bootstrap 源文件。您需要将在 _breakpoints.scss mixins 文件中找到的所有值转换为 ems。

但是，请谨慎行事，只有在您有时间进行彻底测试时才这样做 - 如果您阅读这些在开发 Bootstrap 4 时讨论过的线程，您会发现这里有一些细微差别：

在这里，他们基本上说他们会坚持使用px，因为我遇到了同样的问题 - 它在编译时中断。因此，在当时，它被认为是 Bootstrap V4 的一项重大更改，也是 V5 需要考虑的事情：

https://github.com/twbs/bootstrap/pull/27190

这是一个冗长的讨论，讨论在媒体查询中使用 em 单位的利弊。 这里我要提醒您首先考虑是否有时间测试所有场景 - 因为如果您将媒体查询更改为 em，那么您还需要考虑更改容器 @987654328 @，并且，我想，还有许多其他值正在使用 px - 混合你的值不是一个好主意，从长远来看可能会导致无法预料的头痛。

https://github.com/twbs/bootstrap/pull/17403

如果你和我一样，使用 Bootstrap 是因为

经过全面测试
它允许您在一个时间短，预算低

那么我建议将其保留为默认的 px 值，并希望他们会在 Bootstrap 5 中重新考虑此功能。

【讨论】：