CSSのMedia Queriesで画面解像度によるスタイルの出し分け

最近のCSSは画面解像度によってスタイルを適用しわけることができます。

この技術をメディアクエリといいます。少し試してみたので記録しておきます。

(ドヤ顔で書いていますが、もうすっかり浸透しきった技術です。)

書いてみる。

なんの変哲もないHTMLを書きます。

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="./style.css" />
	</head>
	<body></body>
</html>

そこに、画面横幅によってスタイルを出し分けられるCSSを書きます。

@charset "UTF-8";
 
@media screen and (max-width: 500px) {
  body {
  	background-color: #FCC;
  }
}
 
@media screen and (min-width: 500px) {
  body {
  	background-color: #CCF;
  }
}

max-widthとか、min-widthとかが旧石器時代のCSSとは違います。ブラウザの横幅が500pxより大きいか小さいかでスタイルが変わります。

表示してみる。

横幅大きめのところから見ていきます。

スクリーンショット 2013-11-18 19.10.56

少し縮めますが、まだ500pxより広いので、スタイルは変わりません。

スクリーンショット 2013-11-18 19.11.03

スタイルを更に狭くして500pxを下回ると突如スタイルが変わります!

スクリーンショット 2013-11-18 19.11.07

画面リロードなどは必要ないので魔法みたいな感じです。

最近のスマホサイトなどの画面解像度による表示の振り分けは、こういうものも利用しているんですね。

About katty0324

Comments are closed.

Scroll To Top