html - Bootstrap 媒体查询 Rails 错误

Question

我正在尝试通过覆盖 Bootstrap 媒体查询使我的应用程序上的字体更大以适应小型设备。

我正在尝试这样做，通过使用 Bootstrap 媒体查询设置 h1 的字体大小

@media (min-width: @screen-sm-min) {
  h1{font-size: 5rem}
}

只有我收到这条 Rails 错误消息。

Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was "@screen-sm-min) {"

我在下面的答案中看到它们通过显式声明宽度来覆盖，这对我来说不再引发错误，但我不确定为什么我不能使用 Bootstrap 变量。我是否必须在某处设置 @screen-sm-min 的值才能使用它？

Rails 4 Bootstrap 3.3, media queries causing error

Answer 1

看起来这个数字解释了 Bootstrap 迁移到 bootstrap 4 网站时发生了什么:

https://v4-alpha.getbootstrap.com/migration/

所有@screen- 变量已在 v4.0.0 中删除。请改用 media-breakpoint-up()、media-breakpoint-down() 或 media-breakpoint-only() Sass 混合宏或 $grid-breakpoints Sass 映射。

如果你正在使用 sass，你可以为小型设备做这样的事情:

@include media-breakpoint-up(xs) {
  strong {
    font-size: 5rem;
  }
}

但我最终设置了这些值:

@media (min-width: 576px) {
  strong {
    font-size: 4rem;
  }
}