[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach
Post on:2011年11月22日
sponsors
iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。
[ad#ad-2]
The Goldilocks Approachの主な特徴
The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。
-
- multi column（マルチカラム）
- 大きいサイズ用
-
- narrow column（ナロウカラム）
- 小さいサイズ用
-
- single column（シングルカラム）
- 1カラム用
The Goldilocks Approachのケーススタディ
3つのレイアウトは、下記ページでその動作を確認できます。
[ad#ad-2]
The Goldilocks Approachのアプローチ
The Goldilocks Approachのデモページではグリッドを表示させることができるため、レイアウトの仕組みを把握することができると思います。
デモページ：1200pxで表示
デモページ：850pxで表示
デモページ：580pxで表示
Media Queriesはemベースで設計されており、下記のようなスタイルシートになっています。
CSS
ダウンロードファイルの「layout.css」
@media screen and (min-width: 30em) and (max-width: 63.236em) {
#container { width: 30em; }
}
sponsors
