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