レスポンシブcssの書き方

ホームページをのデザインをPCとスマホで切り替えるやり方を紹介。

レスポンシブ対応していないとき、スマホからページを見ると f:id:shangtian:20190214211617p:plain

かなり残念な感じ

やることは２つhtmlとcssにコードを書き加える

以下のコードをhead内に追加すればいい。

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

ちょうど５行目に書き加えてある。

つぎにcss側の設定。メディアクエリという機能を使っていく。 cssに以下のコードを追加して、スマホ用のcssを書いていく。

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

ちゃんとスマホ対応になっている。

f:id:shangtian:20190214212421p:plain

メディアクエリの構文は

@media screen and (条件)　{....}

メディアクリエ内に書かれた条件に当てはまる場合のみ
{...}内に書かれたcssが適用されます。そのためモバイルファースト
にするのか、ディスクトップファーストにするのかで、メディアクエリの
条件や書く内容も変わってくる。

今回の場合はPCをメインにしているのでメディアクエリは
スマホにのみ当てはまるようにしている。