レスポンシブ対応できないとき

メディアクエリを記述しているのに、なぜかレスポンシブ対応ができないという方へ。

viewportの記述忘れがないか

viewportの記述忘れ、コードのスペルミスがないかを疑いましょう。

下記コードをheadタグ内に記述する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

こちらのviewportを記述することで、レスポンシブ対応させることができます。