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で、個人でも商用でも無料で利用できるとのことです。

sponsors

top of page

©2018 coliss