なかなか珍しかったので備忘録。個人的
にも注目しているMedia Queryを使った
レスポンシブWebデザインの構築を、
Sassをサポートしたcssフレームワーク、
Compassを使って行える、というサンプル。

完成度も高めなサンプルなのでCompassを使用しなくてもちょっとソースに目を通しておくといいかもですよ。modernizrを使用してIEにも対応させています。CompassはMoongiftさんの記事をご参照ください。css書くのがちょっと楽になる的なやつです。

Responsive Web Design Using Compass


サンプルです。HTML5で構築。既にMedia Queryを使ったレスポンシブWebデザイン設計は整のえてあります。

では表示を、先日超おすすめしたResponsivepxで確認します。

320px幅


320ｐｘ。iPhone等はこの表示になります。レイアウトも綺麗に保たれています。

768px幅


768pxはiPadの幅と同等です。

1050px幅


1050ｐｘ幅でも問題なく綺麗なレイアウトです。

IE


IEでの表示。

これに加えてSass/Compassが使えるようにされている、というサンプルコード。IEにも対応させたりと至れり尽くせりですな・・以下は説明とgithubへのリンクです。

Responsive Web Design Using Compass / Github