Media Queries

CSS3で追加されたMedia Queries(メディアクエリ)は細かな条件で振り分けられる

従来
<link rel=”stylesheet” href=”screen.css”
type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”print.css”
type=”text/css” media=”print”>

画面上に表示される際にだけ「screen.css」が適用され、印刷される際には「print.css」だけが適用されます。

CSS3での条件指定では：

<link rel=”stylesheet” href=”phone.css” type=”text/css”
media=”screen and (max-width: 480px)”>
<link rel=”stylesheet” href=”pc.css” type=”text/css”
media=”screen and (min-width: 900px)”>
link要素のmedia属性だけでなく、CSSソース内でも指定可能
対象ごとにCSSファイルを分割する必要はありません。

@media screen and (max-width: 320px) {
/* 表示領域が320px以下の場合に適用するスタイル */
div#sidebar { width: 100%; }
}
@media screen and (min-width: 800px) {
/* 表示領域が800px以上の場合に適用するスタイル */
div#sidebar { width: 240px }
}