@import

デバイスに合わせて読み込みファイルを変更

　@import の便利な点は、プリンターやスマートフォン、PCといった使用するデバイスごとに読み込むスタイルシートを変更することができる点です。

　例えば、印刷用の CSS ファイルを作成し、@import で印刷時にはその読み込むファイルを指定することができます。

@import url("./css/printout.css") print

　印刷時のスタイルシートの変更や CSS ファイルの読み込みついては印刷用スタイルシート（印刷用CSS）を参照してください。

　スマートフォン、タブレット、PCといったデバイスごとに web ページのデザインを変更については以下を参照してください。

表示幅によるスタイル変更

　以下の例では、web ページを表示するデバイスごとに読み込む CSS ファイルを自動で変更します。

/* スマートフォン用  デバイスの横サイズが 760px 以下　*/
@import url("./mobile.css") screen　and ( max-device-width:760px);
/* タブレット用  デバイスの横サイズが 761px 〜　1200px　*/
@import url("./pad.css") screen and (min-device-width:761px) and ( max-device-width:1200px);
/* PC用  デバイスの横サイズが 1201px 〜　1500px　*/
@import url("./normal.css") screen and (min-device-width:1200px) and ( max-device-width:1500px);

　上から順に評価していき、max-device-width 以下に該当するデバイスであれば設定されたファイルを読み込みます。
　この場合は、スマートフォンのように横幅が小さいものから順次評価してきます。大きいものから評価する定義方法もありますが、ここでは小さいものからの例で留めます。

@media によるスタイル変更

　以下の例は @media（メディアクエリ）によってスタイルを変更する例です。
　上記の @import の例のように web ページを表示するデバイスごとに読み込む CSS ファイルを変更することで、デバイスごとに全く違うスタイルを反映することができます。
　しかし、ほんの一部だけのスタイルを変更したい場合があります。スマートフォンにおける縦向きでの表示と横向きでの表示の場合などです。

　例えば、縦向きでは min-width:480px; でちょうどよい大きさで表示されるが、横向きでは小さくなりすぎるような場合です。
　そのような場合は、@media を利用して一部だけスタイルを変更します。

/* 縦向きの場合 */
@media screen and (orientation:portrait){
  body{
		min-width: 480px;
	}
}
/* 横向きの場合 */
@media screen and (orientation:landscape){
	body{
		min-width: 960px;
	}
}

　この例では、スマートフォンが縦向きの場合は　min-width:480px; 、縦向きでは min-width: 960px; とデバイス幅に合わせて表示幅も変更します。

関連（Related）