レスポンシブルWebデザイン

最近、Webページのデザインで、レスポンシブルが流行っているということで、
早速自分でもテストすることにした。

色々なところに、ショーケースがあるので、それを眺めていたら、
想像以上にブラウザサイズに合わされていて驚愕。

こんなのどうやってデザインするんだよ…と思っていたら、
MediaQuery というのを使えば、一発でできるんだね。

MediaQueryの役割は、ブラウザサイズ(デバイスサイズでも可)によって、
使用するスタイルシートを分岐できる、というもの。

この分岐が、JavaScriptを使わなくても、
リアルタイムに変更されるのが素晴らしい。

ブラウザサイズに合わせて、ロゴなどの画像のサイズを変化させているページもある。
それらがどうやっているかは正確には見ていないが、
自分のテストでは、background-image の切り替えで簡単にできた。

仮に、ブラウザサイズを6段階判別するようにして、
それぞれに画像を割り当ててみた。

アクセスログを見ると、まず、ブラウザサイズにより分岐した、
最初の画像が読み込まれるのみ。

ブラウザサイズを変更すると、それに合わせた画像が読み込まれ、
元のサイズに戻しても読み込みは発生しない。

これは良いね。
スマフォとか回線が遅い端末にもぴったりだ。

JavaScriptやPHPなんかを使わなくても、インタラクティブなページが
こんなに簡単に作れるようになっていたとは。
[PR]
by miries | 2012-12-11 19:18 | デジタル系


<< ウインドウ描画 ついに購入!マッスルトレーナー >>