no-image

メディア

@media/メディアごとにCSSを指定

解像度によってスタイルを変更。

解説

@mediaは、ブラウザの解像度を解析してそれにあわせたCSSを呼び出します。
ユーザビリティの向上に非常に役立ちます。
ただ、全てのブラウザに対応しているわけではありませんので
Javascript等で代用するほうが現段階では好ましいかもしれません。

例題では、
320px以下はsp1.cssを呼び出します。
321px以上かつ、480px以下はsp2.cssを呼び出します。
480px以上はpc.cssを呼び出します。
現在のスマートフォンは、基本サイズが
縦の状態で横幅320pxで、横の状態が480pxとされているからです。

メディアクエリー一覧
「width」は、ウィンドウの横幅。
「height」は、ウィンドウの縦幅。
「min-width」は、最小ウィンドウの横幅。
「max-width」は、最大ウィンドウの横幅。
「min-height」は、最小ウィンドウの縦幅。
「max-height」は、最大ウィンドウの縦幅。
「device-width」は、画面の横幅。
「device-height」は、画面の縦幅。
「min-device-height」は、画面の最小の縦幅。
「max-device-height」は、画面の最大の縦幅。

論理演算子一覧
「and」は、「それと」の意味。
「,」は、「または」の意味。
「not」は、「ではない」の意味。
「only」は、古いバージョンのブラウザに適用させないため。