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