CSS3 メディアクエリ

<link rel="stylesheet" href="sp.css" type="text/css"
	media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" type="text/css"
	media="screen and (min-width: 769px)">

スタイルシートを切り替える場合。
max-width: 480px…表示領域が480px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

@media screen and (max-width: 320px) {
   div { width: 100%; }
}
@media screen and (min-width: 769px) {
   div { width: 480px }
}

直接CSSに記述する場合。
max-width: 320px…表示領域が320px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

適用させたいコンテンツの、見せ方次第で適宜変更します。

コメントを残す