WordPressで、メディアクエリがきちんと動作しません

Question

WordPressのシドニーってテーマを使って、サイトを作っています。

PCファーストで、上から順に、PC表示、タブレット、スマホという風に、メディアクエリを書いているのですが、タブレット表示を書くと、何故だかPC表示に影響が出てしまいます。

例えば、

body {
background: #000;
}

@media screen and (max-width: 768px) {
body {
background: #fff;
}
}

こう書くと、PCとiPadminiの表示がどちらとも、白背景となります。

ちなみに、

body {
background: #000 !important;
}

@media screen and (max-width: 768px) {
body {
background: #fff;
}
}

こう書くと、タブレット表示もPC表示も、黒背景になります。

こんな初歩的なところでつまづき、今レスポンシブが全くできない状態で、先に進めなくて困っています。
どなたか助言頂けると嬉しいですm()m
ちなみに、カッコが抜けているとか、そういうミスはありませんm()m

Comments

[yoshinavi]

「viewport」の設定はきちんとしてありますか？

Answer 1

!important
を付けると最優先になりますので、後述のメディアクエリで記述した内容が無効になります。

こんな感じでいかがでしょうか？

body {
    background: #000;
}

@media screen and (max-width: 768px) {
    body {
        background: #fff;
    }
}

@media screen and (max-width: 480px) {
    body {
        background: #999;
    }
}

Comments

[identity0xx]

返答ありがとうございます☆
!importantをつけずにいると、タブレット表示だけでなく、PC表示が、白背景となります。
ちなみに、スマホ表示のメディアクエリはまだ書いておりません。

[tabuu]

ブラウザの開発者ツールの使い方は分かりますか？
Google ChromeやSafari、IEであればF12キーを推す度に切り替わります。

開発者ツールで背景色を設定している要素を探してください。
難しいようであれば、最後の手段として、メディアクエリ側の背景色に
!importantを付ければ大丈夫かと思います。

ですが、後々のことを考えると!importantを付けずに変更できるように、
CSSを整理することをお勧めします。

[identity0xx]

ありがとうございます。
デベロッパーツールの使い方は知っていますが、そもそもタブレット表示にしても、@media screen ～～が出てきません・・・orz

[tabuu]

WordPressではなく、新規にブランクのHTMLを作成して私が提示したスタイルを読み込ませたらPCやタブレットで正常に背景色は変わりますか？

[tabuu]

すみません、他の方が言っているようにviewportは必要です。

[tabuu]

シドニーテーマのstyle.cssを見たらメディアクエリが細かく記述されていました。想定されている箇所に入力できているかも合わせてご確認いただけないでしょうか。