iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework

iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。

Less Framework 2

ベースとなるカラムは下記のようになります。

• iPhoneなどのモバイルデバイス

  320px、2カラム

• iPadやネットブック

  768px、5カラム

• デスクトップなどのブラウザ

  1280px、8カラム

三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。
異なる点はカラムとマージンの量です。

レイアウトの変更にはCSS3のMedia Queriesが使用されています。

CSS

body {width: 696px;}
				
@media only screen and (max-width: 767px) {
	body {width: 264px;}
}

@media only screen and (min-width: 1224px) {
	body {width: 1128px;}
}

Media Queriesの詳しい説明は当サイトで以前とりあげたので、ご参考ください。
CSS3のMedia Queries（メディアクエリ）の使い方と実装例

対応ブラウザはFirefox, Chrome, Safari, Operaで、IE9はMedia Queriesに対応していれば問題なさそうとのことです。
Media Queries非対応ブラウザには「css3-mediaqueries-js」を併用することで、同様のレイアウトをサポートします。

ライセンスはCC 3.0で、個人でも商用でも無料で利用できるとのことです。