レスポンシブデザインとメディアクエリでPCとスマホでファイルを別々にする必要がありますか？

PCとスマホでは画面の表示幅を指定しなければなりませんよね？
ということはPCとは別にスマホ用htmlとCSSファイルを別途作らなけれないけないというですか？
デザインはPCとスマホで変わらず、表示幅の変更だけしたいのですが。

ビューポートはhtmlのheadに記入し、メディアクエリはCSSかhtmlに記述するとか...頭の中が混乱してよくわかりません。

kei344

2020/06/30 05:35

ご自身で試してみればよい問題なので、頭を整理してから質問することをお勧めします。

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

回答3件

ベストアンサー

PCとスマホでは画面の表示幅を指定しなければなりませんよね？

いいえ、そんなことはありません。
「レスポンシブデザイン　サンプル」でググって、それらのスタイルを調べてみてください。最大幅や最小幅を指定しているものはあっても、表示幅を指定しているものは少ないはずです。

投稿2020/06/30 05:55

Lhankor_Mhy

総合スコア36117

PCとは別にスマホ用htmlとCSSファイルを別途作らなけれないけないというですか？

いえ、別々にファイルを作成しなくて大丈夫です。

レスポンシブとはPC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。

幅の可変はメディアクエリの記述で対応するのが特徴です。

表示エラーが少ないのとユーザビリティが向上するという点や、Google検索エンジンのクローラーの巡回の手間が少なくなるという利点があります。Googleはレスポンシブデザインの使用を推奨してます。

投稿2020/06/30 17:17

hiroo_mokumoku

総合スコア128

とりあえず1つの方法として、
CSSファイルを1つにまとめる場合の例を書いてみます。

[1] <head>内に、例えば以下を追加

HTML
1<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

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

(4〜5ほど、レスポンシブサイトを見て抽出してみてください。だいたい同じ書き方になっていると思います。思い通りに動作したら、1つ1つ調べて理解するようにしてください。)

[2] CSS内に以下のように記述
(画面幅を大きくしていくと、bodyの背景色が赤→黄→緑→青の順に変化します。)

CSS
1/* スマホのとき */
2body {
3  background: #f00; /* 赤 */
4}
5
6/* 画面幅480px以上のとき */
7@media screen and (min-width: 480px) {
8  body {
9    background: #ff0; /* 黄 */
10  }
11}
12
13/* 画面幅768px以上のとき */
14@media screen and (min-width: 768px) {
15  body {
16    background: #0f0; /* 緑 */
17  }
18}
19
20/* 画面幅1000px以上のとき */
21@media screen and (min-width: 1000px) {
22  body {
23    background: #00f; /* 青 */
24  }
25}