レスポンスの概念と使い方がいまいち分かりません。

Question

レスポンスって条件を満たしたら、メディアクエリ外に記述されたものが、メディアクエリ内の記述に上書きされるものという認識であっていますか？
あと現在レスポンシブでハンバーガーメニューになるメガメニューを作ってるのですが、
PC版に合わせて適切な配置をすると、
レスポンシブ版ではぐっちゃぐちゃになってしまいます。
こういう時はどのような方針で作っていけば良いでしょうか？

Comments

[m.ts10806]

レスポンス
レスポンシブ

どちらの話でしょうか。

Answer 1

「条件を満たしたらメディアクエリ内が優先」というわけではないです。
同じ詳細度なら後勝ちなので、例えば下記のような記述をしたらウィンドウサイズをいくら変えても背景色は#fffが適用されます。

/* 全サイズに効く */
body {
  background-color: #000;
}

@media only screen and (min-width:960px) {
/* 960px以上の時に効く */
  body {
    background-color: #050;
  }
}

@media only screen and (min-width:450px) and (max-width:959px) {
/* 450～959pxの時に効く */
  body {
    background-color: #005;
  }
}

@media only screen and (max-width:449px) {
/* 449px以下の時に効く */
  body {
    background-color: #500;
  }
}
/* 全サイズに効く */
body {
  background-color: #fff;
}

後から書いたものに上書きされないように適切にメディアクエリを利用しないとぐちゃぐちゃになります。