レスポンシブ対応 @media screenが効きません。

Question

{}のつけ方の問題かと思うのですが、どうしても片方しか効きません。どこが違うのでしょうか？よろしくお願いいたします。
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
の記載はされています。

div#header {
@media screen and (max-width: 2000px)
/* PC用のスタイル */
width: 1200px;
margin: auto;

@media screen and (max-width: 500px)
/* スマホ用のスタイル */
width: 400px;
margin: auto;
}

この形だとスマホのみ効き、PC時は400px。レスポンシブ

div#header {
@media screen and (max-width: 2000px)
/* PC用のスタイル */
width: 1200px;
margin: auto;
}

{
@media screen and (max-width: 500px)
/* スマホ用のスタイル */
width: 400px;
margin: auto;
}

この形だとPCのみ効き、スマホ時は1200px。非レスポンシブ

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください
https://teratail.com/help#about-markdown

Answer 1

mediaの中には波括弧入るので気をつけてください。また、headerの中にmediaを書くのではなく、
mediaの中にheaderを書きましょう。
そうするとこのようになります↓

@media screen and (max-width: 500px){
  /* スマホ用のスタイル */
  div#header {
    width: 400px;
    margin: auto;
  }
}

@media screen and (max-width: 2000px){
  /* PC用のスタイル */
  div#header {
    width: 1200px;
    margin: auto;
  }
}

Comments

[chinki]

ありがとうございます、できました！とても助かりました。勉強になりました。

[退会済みユーザー]

お役に立てて光栄です！

Answer 2

そもそもmedia screenの基本形になっていないように思います。

• CSSリファレンス > @media

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

 /* この中に指定 */
  
}

Comments

[chinki]

ありがとうございます、解決しました。とても助かりました。

[m.ts10806]

解決されたようで何よりです。
想定通りに動かない時はまずドキュメントなどで構文の基本系を確認しましょう。
CSSはエラーを出してくれないので、想定通りに動かない場合はたいてい構文が間違っています。