@mediaクエリが正しく機能しない問題を解決したい。(レスポンシブデザインにしたい)

前提・実現したいこと

@mediaクエリを使ってレスポンシブデザインを実現したいと考えています。

progateのサイトの模写にて、レスポンシブ化を試みたところ@mediaが上手く機能せず、記述したコードの通りにレスポンシブ化できませんでした。

具体的には、windowのサイズが670pxを切ったタイミングで@media {max width: 1000px)のfont-size32pxが適応されてしまっていました。
一方で、モバイル向けレイアウトが適応されるタイミングは確認できませんでした。

優先度の問題なのかな？と思ったのですが、自己解決できなかったので今回質問させていただくことにしました。

記述したHTMLコード(index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- ↑レスポンシブにするために必要な文言 -->
  <title>Progate</title>
  <!-- css -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" type="text/css" href="css/responsive.css">
  <!-- ↑レスポンシブにするためのcssファイル -->

</head>
<body>
      <!-- mainここから -->
    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.<br>
            LEARN TO BE CREATIVE.
        </h1>
        <p>
          progateはオンラインプログラミング学習サービスです。<br>
          初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
        </p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or</p>
          <a href="#" class="btn facebook">
            <span class="fa fa-facebook"></span>
            Facebookで登録
          </a>
          <a href="#" class="btn twitter">
            <span class="fa fa-twitter"></span>
            Twitterで登録
          </a> 
        </div>
        <!-- <img src="img/header_logo.jpg" alt="progateのメイン画像です。"> -->
      </div>
    </div>
</body>
</html>

記述したCSSコード(responsive.css)

/*タブレット向けレイアウト*/
@media all and (max-width: 1000px) {
  .top-wrapper h1 {
    font-size: 32px;
  }
}

/*モバイル向けレイアウト*/
@media all and (max-width: 670px) {
  .top-wrapper {
    text-align: left;
  }

  .top-wrapper h1 {
    font-size: 24px;
  }

  .top-wrapper p {
    font-size: 14px;
  }
}

試したこと

✔<meta name="viewport">の確認
✔@mediaの記述方法の確認
✔デベロッパーツールによる他CSS記述との喧嘩の確認

自分で確認した限りでは、問題がないように感じました。
(見落としなどはあるかもしれません。)

稚拙な質問で申し訳ありませんが、ご回答頂けると幸いです。

補足情報（FW/ツールのバージョンなど）

Macを使用しています。

行動規範の内容に同意します

回答1件

記載されているresponsive.cssには特に問題無いように思います（自身の環境で検証してみましたが670px以下で問題なくfont-size:24pxが適用されました）。

styles.cssの記述に何か誤りがあるか、もしくはresponsive.css内の不適切な場所に全角スペースが混じっているということはありませんか？

投稿2020/08/18 13:08

kajimaru315

総合スコア22

ka234

2020/08/19 01:40

ご回答に加え確認までありがとうございます！。自分も上記の短縮コードで確認したところ、670px以下でfont-size24pxが適用されていることを確認できました。ただ、模写コード全体をウェブサイトで見てみると、うまくレスポンシブがいっていないようです。ご意見を受け、styles,cssとresponsive.cssの記述を確認してみたのですが、主だった誤りは見つけられませんでした...

行動規範の内容に同意します