この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

ViewportとMedia Queryを使い、各デバイスの画面サイズに対応したCSSを選択表示させます。
まずはViewportで表示領域の設定を等倍にします。


<meta name="viewport" content="width=device-width; initial-scale=1.0" />

次はMedia Queryで画面サイズに応じたCSSの割り振りをします。

<link href="PC.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" /><!-- パソコン用CSS -->
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" /><!-- スマホ用CSS -->

ちなみにMedia QueryはCSS3から対応しているので、そのままでは古いブラウザで使用できません。
html5shiv-printshiv.jsなどを使って環境を用意して下さい。
html5shiv-printshiv.jsの使い方に関してはこちらの記事を参照して下さい。