メディアクエリを書いてレスポンシブ対応してみた話

【使用言語】

CSS

【きっかけ】

サンプルサイトを作成して行く過程で、PCとSP（スマホの略）を別々の表示にしたいと思った。
のでググってみると、メディアクエリなんちゃらというのがヒット。
試しにやってみることにした。

【解決策】

CSSにてメディアクエリを設定する

/* pc表示時のスタイル指定*/
@media screen and (min-width: 415px) {
　※ここにPC用のスタイル指定を記述
}
/* sp表示時のスタイル*/
@media screen and (max-width: 414px) {
　※ここにSP用のスタイル指定を記述
}

上記記述で
　画面サイズが415px以上と判定された場合→PC
　画面サイズが414px以下と判定された場合→SP
という意味でPC/SPの判別を行っている。

header部分で判別をさせる方法もあるが、こちらだと1つのCSSファイル上で
画面の表示を管理できるのでこちらを採用した。

##参照サイト
レスポンシブの基本、メディアクエリの書き方