本篇教程主要介紹下，如何使網(wǎng)站頁面自適應屏幕的大小。其實，功能做起來很簡單，我們可以使用CSS來實現(xiàn)。下面，廊坊網(wǎng)站建設的工作人員就將詳細步驟進行說明。
我們先來講個簡單的例子看看。有多么簡單呢？頁面結構如下：
<div id="change-color"></div>
然后 css 如下：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
這個很簡單，大家都能想象出來是一個多么枯燥的頁面，一個 300 × 300 像素的紅色正方形在頁面的中上部。學到這里的同學對于這樣簡單的代碼應該是無壓力的了。然后我們在這段 css 后面再加上一點內(nèi)容，改做：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}
來一起看看這個css，這段可以分作兩個部分，第一部分就是我們上面寫的對 #change-color 定義的 css ，這個無需解釋了。第二部分跟我們以前看到的不一樣哈，但是如果去掉 @media (max-width:800px){……} 這樣的結構之后，我們可以發(fā)現(xiàn)，剩下的內(nèi)容也是對 #change-color 的定義，只是跟上面略有不同，一個是寬度發(fā)生了變化，一個是背景色改了。那么現(xiàn)在我們來解釋一下這部分代碼。
默認情況執(zhí)行第一部分的定義，那么背景色就應該是紅色的，寬度是300px。一切如同我們與想的一樣。當瀏覽器內(nèi)容部分的寬度小于等于800px（符合條件，最大寬度為800px）時，使用第二部分的定義，也就是寬度變成了90%，背景色變成了藍色。
然后我們看看實際效果：當網(wǎng)頁寬度大于800px，網(wǎng)頁自適應寬屏。
調(diào)整窗口寬度到內(nèi)容區(qū)域小于800px，網(wǎng)頁適應屏幕窗口調(diào)整，這樣現(xiàn)在效果實現(xiàn)了。
sjfc2008@126.com 
