任務1-6　jQuery實現動態設置頁面的寬度和高度

【任務描述】

由于目前使用的顯示器有多種不同的規格尺寸，因此我們在設計網頁時需要根據屏幕的尺寸合理設置網頁的尺寸與背景。試編寫代碼，在網頁0106.html中實現動態設置頁面寬度和高度的功能。

【思路探析】

（1）根據常見的屏幕尺寸定義多種不同的樣式。

（2）使用screen.width屬性獲取屏幕寬度數據。

（3）使用jQuery的$符號選取HTML元素，使用jQuery的addClass()方法向被選元素添加一個類，使用jQuery的removeClass方法從被選元素中刪除一個類，使用jQuery的text()方法設置所選元素的文本內容。

【特效實現】

根據常見的屏幕尺寸定義的樣式如表1-11所示。

表1-11　根據常見的屏幕尺寸定義的樣式

引用外部JS文件的代碼如下所示。

<script type="text/javascript" src="js/jquery.js"></script>

自定義函數windowMedia()，其代碼如表1-12所示。

表1-12　自定義函數windowMedia()的代碼

調用自定義函數的代碼如下所示。

$(document).ready(function(){ 
           windowMedia(); 
}); 

網頁0106.html對應的HTML代碼如下所示。

<div id="content"></div>

自主訓練