最近ではWebサイトを構築する際、
閲覧されるメディアはPCのみならず、iPhoneなどのスマートフォン、iPadなどなど、
さまざまなメディアからの閲覧されることを想定して構成しなくてはなりません。
そんな数あるメディア環境をCSS3を使って調整する方法「CSS3 Media Queries」のご紹介。
実際の記述方法は
@media screen and (max-width: ○○px) { .class { background:#000; } }
の様にスクリーンサイズ(ブラウザサイズ)について
max-widthやmin-widthを使って判断させ、CSSクラスの指定を切り替える方法です。
(上記チュートリアルページではもっと詳細な判別方法が紹介されています。)
CSS3ではブラウザウィンドウ幅をとってこれたり
JavaScriptに近いことが可能になるので、かなり期待。
CSS3でのブラウザ幅を判断するデモページも用意されています。
※ブラウザサイズを変更することでターゲット要素が変化します。
≫CSS3 Media Queries (demo)
jQueryでも同等のことは可能そうですが、
CSSでこれらの判別が可能ならば、そっちの方が軽く済みそうでいいですね。
残る問題はIEのみ…
ご参考までに。。。