レスポンシブデザイン

ここが分かり易い

https://www.kagoya.jp/howto/webhomepage/responsive/

ざっくりポイントだけ抑えると

head部分に

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

書いとく

css側では画面サイズによって分岐させる箇所で

@media screen and (min-width: 481px)　{ }

@media screen and (max-width: 480px)　{ }

とか書いて{}の中にPC向けスマホ向けのcssを書くだけ

 

 

補足

スマホの画面サイズが480px位が多いからそこで分岐させてるので別に変えてもいい

実際に自分が分岐させた例としては、メインコンテンツをdisplay:flex;で横並びに３つくらい置いてる時に、

PC向けならこの中の一つのコンテンツを30%くらいにしといて、ここにはdisplay:flex;当てる

スマホ向けならdisplay:flex;あてずにwidth:100%;にしといてコンテンツは縦に並んでもらう

みたいな恐らく最もシンプルな使い方した。実際はデザインによって細かい調整があるんだろう。

ただメインコンテンツ部分に綺麗に箱が並んでるようなサイトならこれで良いんかもしれない。