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

Post on:2008年7月17日

デモ

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

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

<textarea name="code" class="html" cols="60" rows="5">
<body>
<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js" type="text/javascript"></script>
</textarea>

<body>

</textarea>

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

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

<textarea name="code" class="html" cols="60" rows="5">
<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js?sizes=800,1000,1200" type="text/javascript"></script>
</textarea>

</textarea>

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

<textarea name="code" class="css" cols="60" rows="5">
.bw-800 #content{
	width:800px;
}
.bw-1000 #content{
	width:1000px;
}
.bw-1200 #content{
	width:1200px;
}
</textarea>