画面サイズによってCSSを切り替える（いわゆるレスポンシブ）

画面の横幅に応じて、読み込むCSSを切り替えます。
いわゆるレスポンシブってやつです。

<style>
@import url("style.css") all and (min-width: 641px);
@import url("style-sp.css") all and (max-width: 640px);
</style>

<!--[if lt IE 9]>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="js/respond.js"></script>
<![endif]-->

最初の @import がそれです。
min-width: 641px が「641px以上の場合」、
max-width: 640px が「640px以下の場合」で読み込むCSSになってます。

最近のブラウザであれば、この記述だけでレスポンシブになるのですが、
IE8以下には対応していません。

そのため、下の4行で対応させます。

<!--[if lt IE 9]>
??
<![endif]-->

この中に書いたものは、IE9より前のバージョン（IE8以下）で有効になります。

IE8以下をレスポンシブ対応させる「respond.js」の詳細はこちらで↓。
IE8以下でレスポンシブWebデザインを実現するRespond.js