ワードプレスでメディアブレークポイントが動作しない

ブートストラップ-4テーマを使用しているWordpressページがありますワードプレスでメディアブレークポイントが動作しない

メディアブレークポイントが機能しないようです。私のカスタムスタイルシート（style.cssに）の終わりに、私が試した：

@include media-breakpoint-down(xs) { 
    body { 
    color: red; 
    } 
} 

@media screen and (min-width: 576px) { 
    body { 
    color: red; 
    } 
} 

@media screen (min-width: 576px) { 
    body { 
    color: red; 
    } 
} 

@media (min-width: 576px) { 
    body { 
    color: red; 
    } 
}

私は<meta name="viewport" content="width=device-width, initial-scale=1">は私が行方不明です他に何<head>...</head>

であることを確認しましたか？

出典

2017-03-23 Optimus

あなたは間違った@media mixinを使用しています。（--- PX分幅）

例モバイル最初：のみ画面とを@media使用

https://jsfiddle.net/g8awz9g4/1/

コード：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

}

例：デスクトップ - >モバイル

https://jsfiddle.net/g8awz9g4/2/

コード：

@media only screen and (max-width : 1200px) { 

} 

@media only screen and (max-width : 979px) { 

} 

@media only screen and (max-width : 767px) { 

} 

@media only screen and (max-width : 480px) { 

} 

@media only screen and (max-width : 320px) { 

}

出典

2017-03-23 11:42:57 Marc

これはうまくいきますが、私が望む効果は最大幅ですが、 '@include media-breakpoint-down（xs）'はブートストラップと一緒に使えないのですか？ – Optimus

あなたのために最大幅を追加しました。_breakpoints.scssが含まれていますか。参照：http://stackoverflow.com/questions/32545506/bootstrap-4-how-to-use-media-query-mixing – Marc

ワードプレスでメディアブレークポイントが動作しない

答えて

関連する問題