@media

　@media はメディアクエリとも呼ばれ、条件ごとにスタイルを摘要するat-ruleの１つです。at-ruleは@-規則や@ルールと表現されたりします。

　@media は、プリンタやディスプレイなどのデバイスやブラウザ、適応中のスタイルなどの特性に応じてスタイルを設定することができます。
　@media に よって、サイトをPCでみる場合とモバイル端末で見る場合によってスタイル設定を変えることができます。

　@media（メディアクエリ）は入れ子にすることができます。

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

　以下の例は @media（メディアクエリ）によってスタイルを変更する例です。
　web ページを表示するデバイスの横幅によってページの最小幅を自動で選択します。

@media screen and ( max-device-width:760px){
  body{
		min-width: 480px;
	}
}

@media screen and screen and (min-device-width:761px) and ( max-device-width:1200px){
  body{
		min-width: 760px;
	}
}

@media screen and (min-device-width:1201px) and ( max-device-width:1500px){
  body{
		min-width: 1200px;
	}
}

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

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

　上記のように表示するデバイスごとに CSS ファイルを変更することもできます。その場合は、@importでデバイスの表示幅ごとに読み込むスタイルシートを自動で変更します。

@import url("./mobile.css") screen　and ( max-device-width:760px);

@import url("./pad.css") screen and (min-device-width:761px) and ( max-device-width:1200px);

@import url("./normal.css") screen and (min-device-width:1200px) and ( max-device-width:1500px);

　web ページを表示するデバイスごとにスタイルを変更する場合は @import を利用したほうが便利です。