CSSでhtmlをスマホとHPで異なった表記を行いたい

前提・実現したいこと

CSSでHPとの連携は取れているのですが、スマホでの表示がHPのままとなっています。
スマホでは異なるレイアウトを行いたいがどうすれば良いか

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

HPではCSS通りにレイアウトされているがスマホでは対応できていない。

該当のソースコード

css
1#site-box { 
2	   width:750px;}
3
4
5 #a-box {  
6
7 }
8
9
10 #b-box { 
11	 float:left;
12	width:375px
13 }
14
15
16 #c-box {
17	float:right;
18	width:375px;
19           
20 }
21
22
23  #d-box { 
24	clear:both;
25	width:375px   }
26
27@media (max-width: 767px) { 
28 #a-box {  
29
30 }
31
32
33 #b-box { 
34	 
35	width:375px
36 }
37
38
39 #c-box {
40	
41	width:375px;
42           
43 }
44
45
46 #d-box { 
47	clear:both;
48	width:375px   }
49 }

試したこと

スマホ対応のために@mediaを追記した。

m.ts10806

2018/06/05 07:13

HP　とは何でしょうか。異なるレベルのものを同レベルに扱っているような気がするのですが・・・

m.ts10806

2018/06/05 07:13

CSSだけではなくhtml、javascriptも提示してください。

m.ts10806

2018/06/05 07:14

確認されたOSやブラウザなども追記してください。

yoshinavi

2018/06/05 07:39

レイアウトはCSSで行いますが、HTMLの組み方も関わる場合がありますので、「mts10806」さんのご指摘どおり、CSS以外のコード等も提示されると、より良い回答を得れると思います。

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

回答2件

ベストアンサー

１．HTMLファイルの<head>内に下記を追加

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

２．CSSの[media]を変更

media screen and (max-width: 767px)

レスポンシブデザインなどでググると色々と出てきますよ！

投稿2018/06/05 08:02

shu

総合スコア37

これかな？

html
1<meta name="viewport" content="width=device-width,maximum-scale=1">

投稿2018/06/05 08:00

KazuhiroHatano

総合スコア7804

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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