Bootstrap媒体查询Rails错误

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

我试图这样做，通过使用bootstrap媒体查询设置h1的字体大小

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

只有我收到此Rails错误消息。

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

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

Rails 4 Bootstrap 3.3，媒体查询导致错误

Answer 1

看起来这个数字解释了迁移到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; } } 

Answer 2

媒体查询应该说：

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

css中的变量以美元符号开头。 假设变量实际上被称为screen-sm-min ，那么你应该很好。 你也忘了font-size: 5rem后的分号font-size: 5rem只是FYI