最近の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より大きいか小さいかでスタイルが変わります。
表示してみる。
横幅大きめのところから見ていきます。
少し縮めますが、まだ500pxより広いので、スタイルは変わりません。
スタイルを更に狭くして500pxを下回ると突如スタイルが変わります!
画面リロードなどは必要ないので魔法みたいな感じです。
最近のスマホサイトなどの画面解像度による表示の振り分けは、こういうものも利用しているんですね。