正方形のユニットで構成された、スマフォ対応のHTML5ベースのフレームワーク -Fluid Squares

表示サイズによって正方形のユニットが最適に構成される、Media Queriesを使ったフレームワークを紹介します。
IE8以下のMedia Queries非サポートブラウザにもスクリプトで対応しています。

Fluid Squares V2

[ad#ad-2]

Fluid Squaresの主な特徴

• 正方形のユニットを使った、HTML5ベースの可変グリッドのフレームワーク。
• Media Queriesで表示サイズによって、カラム数が増減、フォントサイズも調整。
• モバイル ファーストで、小さいディスプレイのためにCSSを記述。
• 最近のモダンブラウザだけでなく、iOS, Android, BlackBerryなどにも対応。
• IEなどMedia Queries非サポートブラウザには「css3-mediaqueries-js」で対応。

Fluid Squaresのデモ

カラム数は1, 2, 3, 4列が用意されており、表示サイズを変更することで数が増減し、それぞれに適したフォントサイズに変更されます。

Fluid Squares V2：幅1300pxで表示
カラム：4列

Fluid Squares V2：幅900pxで表示
カラム：3列

Fluid Squares V2：幅600pxで表示
カラム：2列

Fluid Squares V2：幅480pxで表示
カラム：1列

[ad#ad-2]

Fluid Squaresの対応ブラウザ

対応ブラウザは下記の通りです。

• Firefox3.5+
• Chrome
• Safari3+
• Opera7+
• IE9

IE8以下などの非サポートブラウザは「css3-mediaqueries-js」を使います。