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

最近のCSSは画面解像度によってスタイルを適用しわけることができます。
この技術をメディアクエリといいます。少し試してみたので記録しておきます。
(ドヤ顔で書いていますが、もうすっかり浸透しきった技術です。)

広告

書いてみる。

なんの変哲もない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
画面リロードなどは必要ないので魔法みたいな感じです。
最近のスマホサイトなどの画面解像度による表示の振り分けは、こういうものも利用しているんですね。

タイトルとURLをコピーしました