隨著扁平化的流行，我們的網(wǎng)頁(yè)往往變得更加簡(jiǎn)單和清晰，但雖然簡(jiǎn)單，在就在技術(shù)上和對(duì)開(kāi)發(fā)者的要求上并沒(méi)有變得簡(jiǎn)單，反而是變得更加搞的要求；因?yàn)檎w簡(jiǎn)單了，就不能讓其中有任何瑕疵，讓一切都得看上去是精致的。而今天這個(gè)解決方案也是基于這樣一種需求而來(lái)的，雖然標(biāo)題上是用jQuery來(lái)做，實(shí)際上原生的JS也能做到；當(dāng)然用JS的這個(gè)框架可能開(kāi)發(fā)效率會(huì)更高一點(diǎn)，于是我們下面就以jQuery為例子吧。

那今天這個(gè)需求其實(shí)非常常見(jiàn)，那就是做一些寬屏全屏幻燈片首頁(yè)首屏的時(shí)候，往往可能上面有一個(gè)導(dǎo)航條，而下面就是我們希望鋪滿全屏的幻燈片。這時(shí)候我們就不能夠使用固定的尺寸了，因?yàn)椴煌碾娔X終端屏幕的分辨率不同，就算是同一臺(tái)電腦不同的瀏覽器有效窗口大小也不一樣。

如果用CSS來(lái)做，你可能在其中遇到一些問(wèn)題或者感覺(jué)似乎不是那么靠譜。而如果使用最基礎(chǔ)的JS方式，比如獲取窗口大小減去頂部區(qū)域的高度從而等到幻燈盒子及幻燈圖片的高度，這樣其實(shí)也會(huì)存在一個(gè)問(wèn)題，那就是當(dāng)用戶開(kāi)始的瀏覽器是縮放狀態(tài)的時(shí)候，然后他沒(méi)有刷新網(wǎng)頁(yè)就讓瀏覽器恢復(fù)到全部尺寸，這樣我們的幻燈片的高度還是原來(lái)的那樣，這種體驗(yàn)顯然不夠好。

因此我們需要的是能夠像CSS控制尺寸一樣動(dòng)態(tài)地改變?cè)氐拇笮。簿褪俏覀儤?biāo)題中所說(shuō)的實(shí)現(xiàn)HTML元素隨著瀏覽器窗口大小變化而動(dòng)態(tài)變化，有點(diǎn)兒類(lèi)似CSS3的響應(yīng)式。如果你對(duì)JS的事件比較熟悉，那可能就會(huì)想到resize()事件了。

resize()事件或者說(shuō)方法是干嘛的，其實(shí)看字面上的意思我們就待該知道這是跟重定義（re）大?。╯ize）相關(guān)的，官方給它的定義就是：當(dāng)調(diào)整瀏覽器窗口的大小時(shí)，發(fā)生 resize 事件。 resize() 方法觸發(fā) resize 事件，或規(guī)定當(dāng)發(fā)生 resize 事件時(shí)運(yùn)行的函數(shù)。基本語(yǔ)法如下：

$(selector).resize(function)
//參數(shù):function,可選;規(guī)定當(dāng)發(fā)生 resize 事件時(shí)運(yùn)行的函數(shù)。

于是我們可以編寫(xiě)如下jQuery代碼：

$(function(){
var $wind = $(window); //加載窗口
var $indexBox = $('.index-banner .slideBox'); //加載幻燈片盒子
var $indexImg = $('.index-banner .bd img'); //加載幻燈片img元素
var winH= $wind.outerHeight();//窗口高度
var winW= $wind.outerWidth();//窗口寬度
var headerH= $('#header').outerHeight();//導(dǎo)航高度
var hdh=Math.abs(winH-headerH);
$indexBox.width(winW);
$indexBox.height(hdh);
$indexImg.height(hdh);
//resize事件處理
  $wind.resize(function(){
    var newW = $wind.outerWidth();
    var newH = $wind.outerHeight();
    var newHdh=Math.abs(newH-headerH);
    $indexBox.width(newW);
    $indexBox.height(newHdh);
    $indexImg.height(newHdh);
  })
})

以上的十多行代碼就實(shí)現(xiàn)我們我所需要的需求，當(dāng)然實(shí)際應(yīng)用比上面的可能更為復(fù)雜，比如說(shuō)除了導(dǎo)航高度需要減去外，還可能有一個(gè)最上面的管理工具欄（比如wordpress默認(rèn)狀態(tài)）等等，有了這個(gè)模型我們可以根據(jù)應(yīng)用而舉一反三即可。