[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach

iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。

サイトのキャプチャ

The Goldilocks Approach

The Goldilocks Approachの主な特徴

The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。

  1. multi column(マルチカラム)
    大きいサイズ用
  2. narrow column(ナロウカラム)
    小さいサイズ用
  3. single column(シングルカラム)
    1カラム用

The Goldilocks Approachのケーススタディ

3つのレイアウトは、下記ページでその動作を確認できます。

サイトのキャプチャ

NI Archive

サイトのキャプチャ

Typecast

サイトのキャプチャ

Front Project Planner

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; }
	
}

top of page

©2017 coliss