PC用とスマホ用の表示切り替えをCSSだけで行う方法(レスポンシブWebデザイン）

PCとスマートフォンでスタイルを変更する手段をいくつか照会します。

HTMLに直接書いているwidthの設定を外すことを忘れずに！。

１、ヘッダー部分で切り替え情報を記載する
HTMLヘッター部分にviewportを設定する。
次に、media、screenの480px以下をスマートフォンと判断し、spcssを読み込み
481px以上であればPCと判断しpc.cssを読み込む。
UserAgentがIEの時だけはmedia、screenが効かないので、そのままpc.cssを読み込む。
(iphoneはIEでないので、問題ない）
IEはmedia属性のdevice-width系プロパティを理解してくれないので、if IE付でもう１度PC用のCSSを読ませます（これがないとIEで真っ白になる）。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link media="only screen and (max-device-width:480px)"  href="sp.css" 
                        type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css"
                        type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet" />
<![endif]-->

※しかし、この方法では、一部Android端末で不具合が生じるようです。
初回アクセスの時だけ、なぜかPC用のCSSが読み込まれてしまう、というものです。
リロードしたり、他のページに遷移すると直るといわれています。
（http://html-five.jp/558/）

<!--[if IE]>
   (中身)
<![endif]-->

は条件付きコメントといいます。
「条件式」の部分に合致するブラウザのみが、「中身」の部分に記述されたHTMLを読みます。
それ以外のブラウザは、「中身」の部分をコメントだと判断するため、無視します。

２、CSS内で切り分ける
1) メディアクエリ（＠media)を使用
ブラウザの横幅(SP:320px以下, タブレット800px以下,PC1024px以上）
を判別し、それぞれCSSを切り替えます。

CSSを振り分けるにはCSS3のメディアクエリを使用します。
 @media only screen and (max-width: 979px) {
   
    Html{
        Width:100%;
    }
 

  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }

} /*デバイスの横幅が979px以下の場合*/

@media only screen and (min-width: 321px) and (max-width: 768px) {
   
    Html{
        Width:100%;
    }

  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }

} /*デバイスの横幅が321以上768以下の場合*/

@media only screen and (max-width: 320px) {
   
    header{
        Width:90%;
    }
 

  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }

} /* デバイスの横幅が320px以下の場合 */

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
WidthとHeightをAutoにして、画像を伸縮するように指定をします。

2) @importを使用
ブラウザサイズごとのCSSを作成し、@importでそれぞれのサイズごとに読み込む方法もあります。
@import url(style.css) screen and (min-width: 769px); /* 769以上 */
@import url(tablet.css) screen and (max-width: 768px); /* 768以下 */
@import url(smart.css) screen and (max-width: 320px); /* 320以下 */

３、UserAgentによる振り分け
JavaScriptでUserAgentをみて、適用CSSを区分けする
（一番無難な方法のようです）
 <script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
   document.write('<link href="./common/sp/common.css" type="text/css" rel="stylesheet"/>');
}else{
   document.write('<link href="./common/pc/common.css" type="text/css" rel="stylesheet"/>');
}
})();
</script>

iPad を除外したいのであれば、if 文を以下のようにします。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) || navigator.userAgent.indexOf('Android') > 0)


【参考URL】
http://www.yuta-system.com/homepage/pccss1.html
http://allabout.co.jp/gm/gc/23921/2/
http://www.hp-stylelink.com/news/2013/07/20130716.php
http://html-five.jp/558/
http://allabout.co.jp/gm/gc/396404/