Javascriptでブラウザのサイズを取得して、あらかじめ数種類(デモでは7種類)設定したBody要素のclass名に書き換えて、リキッドレイアウトを実現させるテクニックがA List Apartさんで紹介されています。
A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique
デモページを見て参考にするしかなさそうですが、非常に簡単に実装できます。
ヘッド部分で、変化させるブラウザサイズを設定した外部jsを読み込んで
Body要素のclass名を
＜body class="initial">
このようにしておきます。
上記部分を入れておくと、現在のブラウザサイズとモードを表示してくれます。
あとはスタイルシートを
.initial .contents {
width: 760px;
}
.pda_ver .contents {
width: 60px;
}
・
・
・
.screen_wide .contents {
width: 1200px;
}
このようにしていけば、ブラウズサイズごとに異なるレイアウトが可能になります。
この方法なら、固定幅のリキッドレイアウトが可能になり、ブラウザサイズによって特定のボックスを非表示にしたり、フォントサイズを変えたりすることもできますね。
Javascriptも非常にシンプルなので、切り替えの種類を増減させたり、ブラウザの高さも絡めたりし易いです。
コメントする