Webサイトの個人的な定義を考え直し。

グリッドシステムは960グリッドシステムの他、 レスポンシブでResponsive Grid Systemのチェック。
BootstrapとFoundationはとりあえず放置だけど扱うならFoundationの方がシンプルでいいかも。
Media-Queriesも一応お勉強。

PCサイトは近年モニターの解像度があほみたいに上がっているけど、
とりあえず960グリッドに沿ったデザインで作る。
Retinaは無視。

html5shivとCSS3 PIEでHTML5とCSS3をIE8以下に対応。
html5shivをダウンロード
CSS3 PIE

画像はCSS Spliteで作り伸縮させるものは個別で用意。

■ rem（応急用にひとまずIEに対応）
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

■ HTMLのmeta
<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />

<link rel=”stylesheet” media=”all” type=”text/css” href=”style.css” /><!– ※デフォルトのスタイル（style.css） –>
<link rel=”stylesheet” media=”all” type=”text/css” href=”tablet.css” /><!– ※タブレット用のスタイル（tablet.css） –>
<link rel=”stylesheet” media=”all” type=”text/css” href=”sp.css” /><!– ※スマートフォン用のスタイル（sp.css） –>

端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。

以下の様な書き方もあり。
<meta name=”viewport” content=”width=device-width”>
<link rel=”stylesheet” href=”css/sp.css”>
<link rel=”stylesheet” href=”css/tablet.css” media=”only screen and (min-width:641px) and (max-width:979px)”>
<link rel=”stylesheet” href=”css/style.css” media=”only screen and (min-width:980px)”>

次に3つ（任意）のCSSを用意します（数値は任意です。色々試してみて下さい）
■ PC：横幅980px以上
■ タブレット（android）：横幅768px
■ スマートフォン（android）：横幅640px
PCとタブレットの横幅は1024以上でも769以上でも良いでしょう。

/*===============================================
●style.css 画面width:980px以上
===============================================*/
@media screen and (min-width: 980px){
img{
max-width: 100%;
height: auto;
}
#container{
width:960px;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
/*===============================================
●tablet.css 画面width:979pxまで
===============================================*/
@media screen and (max-width: 979px){
img{
max-width: 100%;
height: auto;
}
#container{
width:100%;
}
～以下、画面の横幅が979pxまでの場合のスタイル記入～
}
/*===============================================
●sp.css  画面width:640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 980px);
@import url(tablet.css) screen and (max-width: 979px);
@import url(smart.css) screen and (max-width: 640px);