レスポンシブ（スマホ版のみ）ききません。。原因は何でしょうか？

前提・実現したいこと

何度もレスポンシブの質問ですみません????
過去のレスポンシブがきかない要因はすべてあたってみたのですが、それでも解消されないため皆様のお知恵をお貸しください。
今回は、スマホ版のみレスポンシブの指示が聞かず、検証ツールでも打ち消されているわけではなく、スマホ版の指示そのものが上がってきていないように思います。原因はなんでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<meta charset="utf-8">
3
4<head>
5 <meta name="viewport" width="device-width,initial-scale=1">
6 <link rel="stylesheet" href="css/reset.css">
7 <link rel="stylesheet" href="css/style.css">
8 <link rel="stylesheet" href="css/responsive.css">
9 <title>はじめてのコーディング　テイク9</title>
10</head>
11<header>
12 <div class="header-top">
13  <h1>はじめてのコーディング</h1>
14 </div>
15 <div class="main-visial">
16  <div class="kv-copy">
17   <p>コーディングを学習して、<br>
18    オリジナルサイトを作成しよう</p>
19  </div>
20 </div>
21
22</header>
23<main>
24 <section>
25
26  <h2 class="section-title">はじめに</h2>
27  <p class="section-text">
28   このサイトは、コーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。
29  </p>
30 </section>
31
32 <section class="bg-gray">
33
34  <h2 class="section-title">学習の心構え</h2>
35  <ul class="gakusyu-list"></ul>
36  <li class="atitude-item">
37   暗記しようとしない
38  </li>
39  <li class="atitude-item">反復練習する</li>
40  <li class="atitude-item">習得するまでコピペ禁止</li>
41  <li class="atitude-item"> １回で理解できなくても気にしない</li>
42 </section>
43
44 <section>
45
46  <h2 class="section-title">学習すること</h2>
47  <ul class="content-list">
48   <li class="content-item">
49    <img src="images/icon_html.jpg">
50    <p>HTML5</p>
51   </li>
52   <li class="content-item">
53    <img src="images/icon_css.jpg">
54    <p>CSS3</p>
55   </li>
56   <li class="content-item">
57    <img src="images/icon_js.jpg">
58    <p>JavaScript/jQuery</p>
59   </li>
60  </ul>
61
62 </section>
63
64 <a class="btn" href="#">Webサイトを見る</a>
65</main>
66<footer>©2020 cresta.design</footer>
67

CSS

@charset "UTF-8";
/*共通レイアウト*/
body {
  font-size: 16px;
  font-family: "Helvetica", "YuGothic";
  text-align: center;
  line-height: 1.5;
  list-style: none;
}

section {
  padding: 80px 0;
  /*h2などのタグに直接名前を付与する*/
  /*イメージの設定忘れ注意*/
}
section img {
  width: 100%;
  vertical-align: bottom;
}
section h2 {
  font-size: 30px;
  color: #E47B12;
  padding-bottom: 50px;
}

/*ヘッダー*/
header .header-top {
  background-color: #E47B12;
  color: #FFFFFF;
}
header .header-top h1 {
  font-size: 40px;
  padding: 20px 0;
}

/*メインビジュアル　キャッチコピー*/
.main-visial {
  background-image: url(../images/kv-img.jpg);
  background-size: cover;
  background-position: center;
}
.main-visial .kv-copy {
  color: #FFFFFF;
  padding: 155px 0;
  font-size: 30px;
  line-height: 45px;
}

/*はじめに*/
.section-text {
  max-width: 800px;
  margin: 0 auto 20px;
  /*要素自体を中央寄せ*/
  text-align: left;
  /*中身はそのなかで左寄せ*/
}

/*学習の心構え*/
.bg-gray {
  background-color: #F0F0F0;
}
.bg-gray .atitude-item {
  padding-bottom: 15px;
}
.bg-gray .atitude-item:last-of-type {
  padding-bottom: 0;
}

/*学習すること*/
.content-list {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  /*アイテムではなくここに*/
}
.content-list .content-item {
  /*margin: 0 auto;*/
  padding: 20px;
}
.content-list .content-item p {
  text-align: left;
  font-weight: bold;
}

/*ボタン*/
.btn {
  background-color: #E47B12;
  color: #FFFFFF;
  padding: 12px 40px;
  text-decoration: none;
  margin-bottom: 80px;
  display: inline-block;
}

/*フッター*/
footer {
  background-color: #222222;
  padding: 15px 0;
  color: #FFFFFF;
}

/**/
/**/

CSS（レスポンシブ）

/*レスポンシブ版*/

/*タブレット版*/

@media screen and (max-width:1100px) {
 header .header-top h1 {
  font-size: 5vw;
 }

 header .kv-copy p {
  font-size: 4vw;
 }
}

/*スマホ版*/

@media screen and (max-width:767px) {
 header .header-top h1 {
  font-size: 4vw;
 }

 header .kv-copy p {
  font-size: 3vw;
 }
}

試したこと

・（おそらく違うと思うが）あえて名前を変えてみる。
→クラス名などの指示の評価指数を下げることで聞かないかとうっすら思ったけど、やっぱ大前提として名前が違うので指示がききませんでした。

・もう一回コピペしてみる
→最近タブレット版をつくったあとに、タブレット版をそのままコピーし数値のみを変更する。という風に作成しているので、コピペの際にミスかと思ったけれど変化なしでした。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

m.ts10806

2021/01/27 02:59 編集

font-sizeでは変化が見えにくいんでは。よほど大げさに小さくしたり大きくしたりならいいんですけど。どこかで指摘した気がしないでもないですが色とか分かりやすいので確認してください。

miyabi_pudding

2021/01/27 03:03

media クエリーの記述は、通常記述の下行に記載していますか？？

mitrasi

2021/01/27 03:05

ご指摘ありがとうございます！どこかの記事でお見かけしたのですが、色はきいてしまうと見たことがある気がします。前回も文字サイズが相変わらず変化なくとも（わかりやすいよう極端に文字サイズを過少・過大にしても）、色だけは指示が通っていたので「そういうことか」と理解した記憶があります。とはいえ、見間違いだったら、申し訳ないので一応やってみます。

m.ts10806

2021/01/27 03:14

単位vwの意味や効果が分かってつけてるならいいんですが。

mitrasi

2021/01/27 03:55

＞miyabi_takatsuk様ご回答ありがとうございます。別途cssを用意し、htmlにて読み込ませています。

mitrasi

2021/01/27 04:14 編集

＞m.ts10806様画面幅に応じて変化する単位で、1vwはビューポート幅の1%、といった具合に変化するものだと認識しております。色変化の件、試してみたところ、タブレット版に指示をするとやはりタブレット、スマホサイズ両方にききました。スマホ版に指示をしたところ、タブレット、スマホともに変化が見られませんでした。色変化が指示が通ること関係なくきく話は、私の思い違いだったかもしれません。大変失礼いたしました。

miyabi_pudding

2021/01/27 05:21 編集

> ご回答ありがとうございます。ここは回答ではなく、質問修正依頼のコメント蘭になります。 > 別途cssを用意し、htmlにて読み込ませています。そういう意味ではありません。デフォルトのCSSの後にメディアクエリーでのCSSの記載がないと、活かされません。メディアクエリーは、CSSの優先度に変化を及ぼせるものではないため、デフォルトのCSSが、メディアクエリーより後の行で記載されている場合、そのメディアクエリーでのCSSは適用されません。なので、メディアクエリーでの指定が、デフォルトのCSSの後に記載されている必要があります。

mitrasi

2021/01/27 05:54

＞miyabi_takatsuk様失礼いたしました。お言葉ですが、今まで別途cssにて読み込ませてきちんと反映できていたのでメディアクエリファイルが別であるから、という理由であれば今回の問題点とは違うかと思われます???? （ちなみにタブレット版はメディアクエリが現段階でもきいているので、メディアクエリそのものが読み込まれていないのではなく、スマホ版周辺で別の要因があるかと考えております。）

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

回答2件

自己解決

こんばんは。
過去のうまくいったときと何が違うのか切り分けて検証したところ、css自体は間違いがないことが判明しました。
となると、htmlでの読み込みやビューポートの際かとにらんだところ、以下の点にミスがあったことにきづきました。

誤答↓

HTML
1 <meta name="viewport" width="device-width,initial-scale=1">
2

正答↓

HTML
1 <meta name="viewport"  content="device-width,initial-scale=1">
2

単純なミスですが、一応ご報告までに。
ご回答、ご協力くださった皆様誠にありがとうございました。
今後ともよろしくお願いいたします。

投稿2021/01/27 14:18

編集2021/01/27 14:19

mitrasi

総合スコア49

感であてずっぽうだけどこれ追加したらどう？

css
1body {
2  -webkit-text-size-adjust: 100%;
3}

投稿2021/01/27 06:43

sousuke

総合スコア3830

mitrasi

2021/01/27 06:52

ご回答ありがとうございます。それはどちらに追加したらよろしいでしょうか？スタイルシートそのもののbody、もしくはレスポンシブシートのタブレット版orスマホ版にbodyを追加して入れ込むのか。詳細にお聞かせ願えると助かります。お手数をおかけしますがよろしくお願いいたします。

sousuke

2021/01/27 07:04

とりあえず共通のbodyに入れておけばよいかと

mitrasi

2021/01/27 07:28

すみません????私の入れ方が悪いかもしれませんが、あまり変化が見られませんでした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

レスポンシブ（スマホ版のみ）ききません。。原因は何でしょうか？

前提・実現したいこと

該当のソースコード

CSS

CSS（レスポンシブ）

試したこと

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

関連した質問