レスポンシブデザインの設定方法

実現したいこと

webサイトの表示において、PC画面用の設定とスマホ画面用の設定を分けられるようにしたい。

前提

HTMLとCSSを使ってWebサイトを作っているのですが、レスポンシブデザインの適用方法がよく分からず困っています。設定する方法を初心者にもわかりやすく教えていただけないでしょうか？
色々なサイトや書籍で調べてみたのですが、@mediaクエリやviewportの設定など、専門用語が多くて理解するのが難しいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>レスポンシブデザインのテスト</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <header>
11    <h1>タイトル</h1>
12    <nav>
13      <ul>
14        <li><a href="#">メニュー1</a></li>
15        <li><a href="#">メニュー2</a></li>
16        <li><a href="#">メニュー3</a></li>
17      </ul>
18    </nav>
19  </header>
20  <main>
21    <p>コンテンツ</p>
22  </main>
23  <footer>
24    <p>フッター</p>
25  </footer>
26</body>
27</html>

CSS
1
2body {
3  margin: 0;
4  font-family: sans-serif;
5}
6
7header {
8  background-color: #f0f0f0;
9  padding: 20px;
10}
11
12nav ul {
13  list-style: none;
14  padding: 0;
15  margin: 0;
16}
17
18nav li {
19  display: inline-block;
20  margin-right: 20px;
21}

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

回答1件

ベストアンサー

こんな感じでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        @media (width<=576px) {
10            /* スクリーン幅が576px以下の場合のスタイル */
11            body {
12                color: red;
13            }
14        }
15
16        @media (width>576px) {
17            /* スクリーン幅が576pxを超える場合のスタイル */
18            body {
19                color: blue;
20            }
21        }
22
23        /* 共通のスタイル */
24        body {
25            background-color: gold;
26        }
27    </style>
28</head>
29
30<body>
31    テキスト
32</body>
33
34</html>