我正在尝试通过覆盖 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 的值才能使用它?
最佳答案
看起来这个数字解释了 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;
}
}
关于html - Bootstrap 媒体查询 Rails 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42178461/