レスポンシブデザイン(ウィンドウサイズでPCやスマートフォンでの閲覧に最適化)でサイト構築する場合に要になります。
ウィンドウサイズによって読み込むCSS(スタイルシート)を切り替えることでユーザビリティの向上を図れますし、またモバイルフレンドリーに適用するためスマートフォン検索でもGoogleに嫌われにくくなります。
<head>~</head>内に記述する方法
link要素として指定します。
従来のスタイルシートの読み込み記述にメディアクエリを追加します。
<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ファイル)に直接記述する方法
ウィンドウサイズに合わせたスタイルシートを個別に用意せず、ひとつのスタイルシート内に条件分けして記述します。
下記はモバイルファースト(スマホ優先)の記述例です。
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)になります。