ウィンドウサイズを取得するjQuery

質問

レスポンシブ対応の際、jQueryでリアルタイムにウィンドウサイズを取得する方法について質問です。
例えば「ウィンドウサイズが700以下の時、文字色を赤に変える」としたい時、検索すると下記のようにすればよいとでてきます。

■ HTML
<p>サンプルテキスト</p>

■ jQuery
var WindowWidth = $(window).width();
$(window).resize(function(){
if(WindowWidth < 700){
$("p").css({ color: 'red' });
} else {
$('#sample').css({ color: 'black' });
}
});

確かにこの記述をするとウィンドウサイズを変更すれば適用されるのですが、元々のサイズが700px以下のときには適用されません。
なので、今は下記のように記述しています。

■ jQuery
var WindowWidth = $(window).width();
$(function(){
if(WindowWidth < 700){
$("p").css({ color: 'red' });
}
});
$(window).resize(function(){
if(WindowWidth < 700){
$("p").css({ color: 'red' });
} else {
$('#sample').css({ color: 'black' });
}
});

こう書くと希望通りの動作（ウィンドウサイズが700px以下のときは文字が赤色になり、ウィンドウサイズを変更するとリアルタイムで変更される）をしてくれるのですが、もう少しきれいにまとめられるのではないかな？と考えております。しかし、うまい記述方法がわからず…。
ご教授いただけると助かります。

回答No.1

noname#249423

こちらは参考になりませんか。

参考URL：

http://bl6.jp/web/javascript/change-process-get-window-size/