Question

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

我试图这样做，通过使用引导媒体查询设置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

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只是FYI

之后你也忘记了分号

Bootstrap媒体查询Rails错误

2 个答案: