レスポンシブのためのメディアクエリの書き方

レスポンシブデザイン(ウィンドウサイズで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)になります。