ブートストラップメディアクエリのレールエラー

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) {" 

。それを使用するには@ screen-sm-minの値をどこかに設定する必要がありますか？

Rails 4 Bootstrap 3.3, media queries causing error

Answer 1

メディアクエリは言う必要があります：ドル記号とCSSの開始で

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

変数。変数が実際にscreen-sm-minと呼ばれると仮定して、あなたは良いはずです。また、この数は4のウェブサイトをブートストラップするための移行ブートストラップで何が起こっていたかを説明のように

Answer 2

が見えるだけFYI font-size: 5rem後にセミコロンを忘れていました：

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.

あなたが」あなたは小さなデバイスのためにこれのような何かをすることができます：

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

最終的に値を設定しました：

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