CSS3 メディアクエリ

スタイルシートを切り替える場合

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

max-width: 768px…表示領域が768px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

直接CSSに記述する場合

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

max-width: 768px…表示領域が768px以下の場合に適用。
min-width: 769px…表示領域が769px以上の場合に適用。

コメント

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