画面サイズで処理が切り替わるレスポンシブ対応とは

パソコンとスマホで表示が違うようにできるかな…

こうした悩みを解決します

レスポンシブ対応とは

レスポンシブ対応とは、パソコンでもスマホでも問題なく表示できるようにすることです。

例えば、下記画像は
画面サイズが768px以上だとパソコン画面と判断してインコ、それ未満だとスマホ画面と判断して私の画像
に切り替わります。
パソコンの方であれば、ブラウザの横幅を調整すれば切り替わります。

これがレスポンシブ対応です。
スマホやタブレット、パソコンと画面サイズの違いによって処理を切り替えます。

上記画像の切り替えは下記のようなソースコードになっています。

<style>
.pc {display:none;}
@media screen and (min-width: 768px) {
.sp {display:none;}
.pc {display:block;}
}
</style>
<body>~</body>

Style部にある@media screen and (~){~~}が画面サイズによって表示を切り替えるメディアクエリです。

bodyタグ内でpcクラスの画像とspクラスの画像を貼ります。
とりあえずpcクラスの画像を消してspクラスの画像が表示するようにしていますが、
768ピクセルを超えたら逆転します。

min-width:○○px という表現は<か≦か>か≧のどれか分かりづらいのですが、
画像サイズ≧768pxでTRUEという考え方のようです。
イメージとしては小さくなったらTRUEのように思ってしまいます。

まとめ

・レスポンシブ対応とは、パソコンでもスマホでも問題なく表示できるようにすること
・メディアクエリと呼ばれる@media screen and (~){~~}が画面サイズによって表示を切り替えます
・メディアクエリはcssで、HTMLのstyleタグ内に入れることもできます