現在很(hěn)多(duō)網頁都做(zuò)得(de)特别炫，因此很(hěn)多(duō)時(shí)候大(dà)家(jiā)都想着實現一些(xiē)看上(shàng)去吊炸天的效果，而這些(xiē)前端的效果不管怎麽華麗(lì)最原始的基礎還(hái)是那(nà)一行(xíng)行(xíng)的代碼，HTML+CSS+JS就是前端的三劍客。
今天我們就講一講我們最近的一個(gè)實踐，就是讓一副圖片填滿整個(gè)屏幕(除去浏覽器(qì)所占區(qū)域哦)。通(tōng)常有(yǒu)兩種比較經典的效果，用到的原理(lǐ)之一就是這個(gè)。一個(gè)就是在PC上(shàng)經常看到一些(xiē)網頁鼠标動一下翻一整頁，另外一個(gè)就類似與手機APP第一次打開(kāi)是的引導頁。
而不管是哪個(gè)實例，我們都要做(zuò)到的一個(gè)效果就是讓一個(gè)HTML元素(标簽)的區(qū)域鋪滿全屏?就算(suàn)是傳統的PC網頁，我們也要接受不同的電(diàn)腦(nǎo)屏幕高(gāo)度，在傳統的網頁設計(jì)中我們可(kě)能采用一個(gè)固定的寬度，比如960px、1000px、1200px，當然現在這種固定寬度的設計(jì)依然很(hěn)流行(xíng)，隻是把這個(gè)固定的寬度增加了(電(diàn)腦(nǎo)屏幕的提升，呵呵)。但(dàn)如果要實現上(shàng)述我們提到的看上(shàng)去酷炫的風格，我們顯然不能使用固定的寬度和(hé)高(gāo)度。
顯然，我們需要使用自适應的寬高(gāo);大(dà)家(jiā)都知道(dào)寬度自适應似乎比高(gāo)度自适應來(lái)的更簡單。可(kě)能大(dà)家(jiā)都有(yǒu)這樣的經曆，認為(wèi)寬度100%比高(gāo)度100%的适用範圍更加廣;而實際上(shàng)也是如此。
假設我們現在值在網頁上(shàng)寫了、、三個(gè)最基本的标簽(實際上(shàng)就是很(hěn)多(duō)編輯器(qì)新建一個(gè)document默認所擁有(yǒu)的)，我們來(lái)看的盒模型
大(dà)家(jiā)可(kě)以看到寬度是1350px，其實就如果出去margin就是我當前可(kě)用屏幕區(qū)域的100%寬度，而高(gāo)度顯然不是這樣;這樣我們可(kě)以通(tōng)俗地理(lǐ)解為(wèi)寬度的100%比高(gāo)度的100%應用範圍更廣。
因此要實現我們的需求，寬度方面在沒有(yǒu)特殊情況下直接使用100%即可(kě)解決;而高(gāo)度我們自然也想到過用100%,但(dàn)不得(de)不考慮它的适用範圍了。其實不管是寬度也好，高(gāo)度也罷，它們的100%(當然其他數(shù)值也一樣)是以它們的父節點作(zuò)為(wèi)參考的，而最大(dà)的“祖宗”的默認寬度就是100%，而高(gāo)度為(wèi)0。
因此得(de)到全屏展示當然我們也想到了兩種方式，一種是CSS，另外一種則是在靜态CSS無法實現的時(shí)候采用JS對HTML進行(xíng)DOM操作(zuò)動态改變元素的CSS屬性值。
1、CSS方式
在使用CSS方式的時(shí)候必須有(yǒu)前提的，就拿(ná)高(gāo)度的100%來(lái)說，咱們必須定義它的父級元素的高(gāo)度，而且高(gāo)度為(wèi)鋪滿全屏的高(gāo)度。同時(shí)注意不要有(yǒu)其他的CSS沖突，比如我們使用position:absolute(絕對定位)的時(shí)候我們使用高(gāo)度100%就會(huì)失效了。
2、javascript方式
如果因為(wèi)我們的這個(gè)模塊的需求，導緻我們不能滿足使用CSS完成這一需求的時(shí)候，我們就要動用JS，來(lái)做(zuò)了。當然我們不管 是用原生(shēng)的JS還(hái)是jquery等框架。我們必須選對相應的對象及其方法。比如很(hěn)多(duō)人(rén)說應該選擇Screen對象，其實我覺得(de)不是這樣的，因為(wèi)不管是我們的pc也好還(hái)是我們的移動端也好，浏覽器(qì)本身往往已經占用了一定的位置，因此我建議使用window對象來(lái)獲取尺寸的數(shù)值，然後通(tōng)過DOM對HTML元素的CSS屬性值進行(xíng)改變。
