IE6にも対応した、レスポンシブデザインの雛形を作りました

最近はやりのレスポンシブデザイン雛形を作成しました。
レスポンシブデザインってなんぞや？という人はとりあえず下記サンプルを見てください。
そしてブラウザの幅を小さくしたり大きくしたりしてください。

レスポンシブデザインサンプル

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法 だそうです。

解説

下記のように横幅によって反映させるCSSを変えています。
横幅769px以上の場合は「style.css」（PC用）を
横幅768px以下の場合は「tablet.css」（タブレット用）を
横幅640px以下の場合は「smart.css」（スマホ用）を反映するようになっています。

	<link href="css/style.css" rel="stylesheet" media="screen and (min-width: 769px)" /> 	<link href="css/tablet.css" rel="stylesheet" media="screen and (max-width: 768px)" /> 	<link href="css/smart.css" rel="stylesheet" media="screen and (max-width: 640px)" /> 

IE対応

これだけだとブラウザ界のヒネクレ者IE8以下では反映されないのでrespond.min.jsを適用します。

<!--&#91;if lt IE 9&#93;>
<script src="js/respond.min.js"></script>
<!&#91;endif&#93;-->

以上でIE6～9　chrome safari firefox　対応のレスポンシブデザイン雛形が完成です。
あとは好きなように装飾をしてください。

雛形のZIP

 - HTML・CSS IE6