Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8656

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

$
0
0

【使用言語】

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ファイル上で
画面の表示を管理できるのでこちらを採用した。

参照サイト

レスポンシブの基本、メディアクエリの書き方


Viewing all articles
Browse latest Browse all 8656

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>