視窗事件onresize

在做自適應布局的時候，我們常常需要根據視窗不同的解析度給出不同布局和樣式，今天說的onresize便能幫我們實現這一效果。

onresize事件在視窗或者框架的大小發生改變的時候會被呼叫，下面我們用乙個例子來演示。

在這個例子中，我們想要實現的效果是：當螢幕寬度小於500時，頁面的背景色為灰色；當螢幕寬度大於等於500時，頁面背景為粉色；當螢幕寬度大於等於800時，頁面背景為紅色。所以，我們首先需要獲得螢幕的寬度，需要用到前面封裝的client方法。

<
script
>
function
client() 
}else
if(document.compatmode 
==="
css1compat")
}return
}script
>

要根據不同螢幕大小實現不同的效果，需要呼叫onresize事件。

<
script
>
window.onload 
=function
() else
if(client().width 
>=
500)
else
};   
}script
>

現在基本功能已經實現，但是，前面一直提到onresize是在螢幕變化的時候才會被觸發呼叫，那麼在初始化的時候，沒有發生螢幕變化，那麼上面的顏色改變就不會被觸發，因此，我們需要將上面的**進行稍微的調整優化。

<
script
>
window.onload 
=function
() else
if(client().width 
>=
500)
else
document.body.style.backgroundcolor 
=bgcolor;}}
script
>

至此，我們就利用onresize實現了想要的效果了。