レスポンシブのCSSが反映されません

前提・実現したいこと

https://note.com/tokyofreelance/n/n4baf7dd10306
こちらのデイトラからの模写コーディングの課題をやっているのですがレスポンシブ対応が何を打ち込んでも反映されず困っています。
ファイルの位置やviewportなどネットに載っているものは大体試しましたがレスポンシブのCSSが反映されているのかも分かりません。
ビジュアルスタジオコードにて作成していますがプレビューをスマホサイズにするとレイアウトが崩れます。
どうすればレスポンシブを反映させられるでしょうか？
（カラーをレッドやフォントサイズを小さくしているのは適応されているか分かりやすくする為です。）　

追記
こういうサイトを使うのが初めてだった為必要なところのみ抜き出せばいいかと思って省略して書いてしまいましたごめんなさい。
回答を参考に弄ってみたら反映させることができましたありがとうございます。

発生している問題・エラーメッセージ

レスポンシブが反映されない、画面を狭くするとレイアウトが崩れる


### 該当のソースコード
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">
  </head>
 <div class="copy-container">
     <h2 class="catch-copy">1日1題30日でプロのエンジニアになろう！</h2>
     <h1 class="catch-copy-2">毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます</h1>
    </div>
```CSS
.copy-container{
 margin-top:-20px;
 width:100%;
 height:290px;
 color:rgb(21, 48, 56);
 margin-left: auto;
 margin-right: auto;
 background-image:url("../img/main-vsual-nontitle.png");
}

.catch-copy{
 text-align:center;
 font-size:30px;
 padding:72px 210px 0px 210px;
}


@media screen and( max-width:480px )
{
.copy-container{
	width:100%;
	font-size:5px;
	color:red;
}


.catch-copy{
 font-size:5px;
 color:red;
}

}

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

回答2件

ベストアンサー

HTMLの基本タグがない点は、他の回答者の指摘通りですが、

html
1   <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">

この記述だと、画面幅480px以下の時しか Responsive.css を読み込んでませんが、それを認識してますか。
CSS内の @media の記述でレスポンシブ対応しているなら、media="screen and (max-width:480px)"は不要です。

次に、

css
1@media screen and( max-width:480px )

の部分、and の後に半角空白が必要です。

css
1@media screen and ( max-width:480px )

としてください。

この２つの修正で画面幅 480px で切り替わるようになります。

CSSは後の方が優先されますので、下記のような書き方でOKです。

css
1/* 全サイズ共通の設定 */
2/* 画面幅480pxより大きいときの固有の設定 */
3
4@media screen and ( max-width:480px ) {
5/* 画面幅480px以下の時の固有の設定 */
6}

投稿2020/09/21 18:18

編集2020/09/21 23:37

hatena19

総合スコア34075

まず重要タグを略さない<Body></html>とか

HTML
1<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4<title></title>
5<head>
6<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7    <link rel="stylesheet" type="text/css" href="css/Responsive.css" media="screen and (max-width:480px)">
8</head>
9<body>
10<div class="copy-container">
11	<h2 class="catch-copy">1日1題30日でプロのエンジニアになろう！</h2>
12	<h1 class="catch-copy-2">毎日設定された課題をこなすだけ！未経験から30日でプログラミングスキルが身につきます</h1>
13</div>
14</body>
15</html>

画面の幅で判断しているのでしょ？
そうしたらPCの場合も条件入れないと

CSS
1/* PCの場合幅が481px以上で適用 */
2@media screen and (min-width: 481px) { 
3	.copy-container{
4		margin-top:-20px;
5		width:100%;
6		height:290px;
7		color:rgb(21, 48, 56);
8		margin-left: auto;
9		margin-right: auto;
10		background-image:url("../img/main-vsual-nontitle.png");
11	}
12
13	.catch-copy{
14		text-align:center;
15		font-size:30px;
16		padding:72px 210px 0px 210px;
17	}
18}
19/* モバイルの場合幅が最大480pxまでで適用 */
20@media screen and (max-width: 480px) { 
21	.copy-container{
22		width:100%;
23		font-size:5px;
24		color:red;
25	}
26
27	.catch-copy{
28		font-size:5px;
29		color:red;
30	}
31}
32