CSS3のmedia queryを使うことで、ブラウザの画面サイズに連動させたスタイル変更が容易になり、javascript無しでスマホなどメディアごとにスタイルを振り分けるごとが可能になります。関連ページ→ 「CSS3のmedia queryを使って、デバイスとブラウザ画面の横サイズ確認、振り分け」。

しかし、いまだに実装状況が定まらず、今後も解像度の高いメディアの登場が予想されるため、簡単なJavascript（jQuery）を使って、media queryと同じような動作を再現してみました。

ブラウザの画面サイズを変更すると、下側の赤いボーダーで囲ったテストBOX（width:80%に指定）の横サイズを監視し、このサイズを表示して、640px以下になると、背景が薄いピンク、さらに420px以下になると、背景が濃いめのピンクに変わります。media queryが画面サイズを監視するのに対して、このスクリプトでは要素のサイズを監視させています。なお、タイトル文字サイズもテストBOXの横サイズが640px以下になると小さくなりますが、こちらはmedia queryを使っています。

$(window).resize(function(){
    var x = $('#testbox').width();
	$('#mmm').text(x);
	if (x <= 480) {
        $('#testbox').css('background','#ff33ff');
	} else {
		if (x <= 640) {
			$('#testbox').css('background','#ffccff');
		} else {
			$('#testbox').css('background','#eeeeee');
		}
	}
})