html - Bootstrap媒体查询Rails错误

我试图通过覆盖引导媒体查询来使我的应用程序上的字体更大，以适合小型设备使用。

我正在尝试通过使用引导媒体查询为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) {"

我在下面的答案中看到它们通过显式声明宽度而被覆盖，这不再对我抛出错误，但是我不确定为什么不能使用bootstraps变量。我必须在某个地方设置@ screen-sm-min的值才能使用它吗？

Rails 4 Bootstrap 3.3, media queries causing error

最佳答案

看起来这个数字说明了迁移到bootstrap 4网站上的bootstrap发生了什么：

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

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

如果您使用的是sass，则可以在小型设备上执行以下操作：

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

但是我最终还是设置了值：

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