Bootstrap媒體查詢Rails錯誤

我正在嘗試通過重寫引導媒體查詢來使我的應用程序的字體對於小設備更大。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) {"

我看到了下面的答案，他們被明確說明的寬度，它不會拋出錯誤了我重寫，但我不知道爲什麼我不能使用引導程序變量。我必須在某處設置@ screen-sm-min的值才能使用它？

Rails 4 Bootstrap 3.3, media queries causing error

來源

2017-02-11 adamscott

媒體查詢應該說：用一個美元符號在CSS開始

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

變量。假設變量實際上被稱爲screen-sm-min，那麼你應該很好。你也忘了分號font-size: 5rem後只是FYI

來源

2017-02-11 16:55:29 Mark

貌似這個數字說明了什麼事情上引導遷移到引導4網站：

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; 
    } 
}

來源

2017-02-11 17:15:07 adamscott

Bootstrap媒體查詢Rails錯誤

回答

相關問題