レスポンシブデザイン（ウィンドウサイズでPCやスマートフォンでの閲覧に最適化）でサイト構築する場合に要になります。
ウィンドウサイズによって読み込むCSS（スタイルシート）を切り替えることでユーザビリティの向上を図れますし、またモバイルフレンドリーに適用するためスマートフォン検索でもGoogleに嫌われにくくなります。
<head>～</head>内に記述する方法
link要素として指定します。
従来のスタイルシートの読み込み記述にメディアクエリを追加します。
|
1 2 3 |
<link rel="stylesheet" href="smart.css" media="screen and (max-width:640px)"> /* ※1 */ <link rel="stylesheet" href="tab.css" media="screen and (min-width:640px) and (max-width:1024px)"> /* ※2 */ <link rel="stylesheet" href="pc.css" media="screen and (min-width:1024px)"> /* ※3 */ |
※1 ウィンドウサイズが640pxまではsmart.cssが適用される。
※2 ウィンドウサイズが640pxから1024pxまではtab.cssが適用される。
※3 ウィンドウサイズが1024px以上はpc.cssが適用される。
上記では、media=” ”にウィンドウサイズによって読み込むCSSファイルを3パターンに条件分けして記述。
あとはそれぞれの条件に合わせて最適化したスタイルシート（CSSファイル）を用意します。
スタイルシート（CSSファイル）に直接記述する方法
ウィンドウサイズに合わせたスタイルシートを個別に用意せず、ひとつのスタイルシート内に条件分けして記述します。
下記はモバイルファースト（スマホ優先）の記述例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
p {color:#000;} @media screen and (max-width:640px) { /* ▼ウィンドウサイズが640pxまでは下記の内容 */ p {color:#ff0000;} /* ▲ここまで */ } @media screen and (min-width:641px) and (max-width:1023px) { /* ウィンドウサイズが640px～1024pxまでは下記の内容 */ p {color:#00ff00;} /* ▲ここまで */ } @media screen and (min-width:1024px) { /* ウィンドウサイズが1024px以上なら下記の内容 */ p {color:#0000ff;} /* ▲ここまで */ } |
上記例ではテキストのカラーを、ウィンドウ幅（width）が640pxまでは赤（#ff0000）、641px～1023pxまでは緑（#00ff00）、1024px以上は青（#0000ff）になります。