[JS]ブラウザの幅に合わせてレイアウトを最適化するスクリプト -Dynamic Layout

Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。

Dynamic Layoutのキャプチャ

Dynamic Layout

デモ

Dynamic Holy Grail
1~3カラムのシンプルなレイアウト、ブラウザ幅600, 800, 1000に設定
Fortes
ブラウザ幅600, 800, 1000, 1200, 1400に設定
fil-ter
ブラウザ幅600, 1000に設定

Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。

調整するページの幅は、いくつか想定する必要があり、スクリプト・スタイルシートに設定を行います。

スクリプトには、外部ファイルとして記述した箇所に下記のように設定します。
例:ブラウザ幅800, 1000, 1200の場合

スタイルシートには、そのブラウザの幅用のスタイルを設定します。
例:ブラウザ幅800は「.bw-800」、ブラウザ幅1000は「.bw-1000」を使用

Dynamic LayoutはMITライセンスで、対応ブラウザはIE6, 7, Fx2, 3, Op9.5, Safari3.1となっています。

sponsors

top of page

©2018 coliss