iPhone、iPad、PCブラウザの各デバイスに合わせて、
CSSを切り替えてレイアウトを変更制御するCSSフレームワーク「Less Framework」のご紹介。

LessFramework2.jpg
Less Framework 2

グリッドレイアウトとして、表示するデバイスによって、
————————————–
iPhone:320px
iPad:768px
PCブラウザ:1280px
————————————–
といったように、全体の幅を変更しているもよう。
(iPhone、iPad以外のスマートフォンやネットブックも対象となります。)

表示幅の制御はCSS3 Media Queriesを使用しており、
ソース構成はHTML5がベースとなっているので、
PCブラウザの対象もHTML5が対応しているもののみとなります。

CSS3 Media Queriesに対応していないブラウザに対しては
「css3-mediaqueries-js」というJSを使ってレイアウトを実現させる構成のよう。
(こんなものがすでに存在していたとは…)

「css3-mediaqueries-js」のダウンロードはこちら
css3-mediaqueries-js – Project Hosting on Google Code

フレームワークのページをPCブラウザで閲覧し、
ブラウザ枠を縮めることで、iPhoneやiPadで閲覧した際のレイアウト具合いも確認可能。

こういったグリッドレイアウトは最近増えてきていますが、
全体構成の参考になります。

是非。。。

【関連記事】
CSS3で閲覧しているメディアによってレイアウトを調整する方法「CSS3 Media Queries」