正方形のユニットで構成された、スマフォ対応の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」を使います。

sponsors

top of page

©2018 coliss