iPhone、iPad、PCブラウザの各デバイスに合わせて、
CSSを切り替えてレイアウトを変更制御するCSSフレームワーク「Less Framework」のご紹介。
グリッドレイアウトとして、表示するデバイスによって、
————————————–
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で閲覧した際のレイアウト具合いも確認可能。
こういったグリッドレイアウトは最近増えてきていますが、
全体構成の参考になります。
是非。。。