隨著互聯(lián)網(wǎng)WEB前端技術(shù)的發(fā)展，各項(xiàng)技術(shù)誕生，BS架構(gòu)、HTML5、CSS3、JQ各種新的技術(shù)出現(xiàn)在我們的面前，今天我們就分享下只有PC站情況下，如何快速做成自適應(yīng)結(jié)構(gòu)，滿足移動端用戶體驗(yàn)。
網(wǎng)站自適應(yīng)結(jié)構(gòu)很多人認(rèn)為很麻煩，望而卻步，寧愿單獨(dú)另外做一個移動站。因?yàn)橐龀勺赃m應(yīng)結(jié)構(gòu)確實(shí)需要一定的技術(shù)才行。但是深入研究下還是不麻煩的，之前小編認(rèn)為實(shí)現(xiàn)網(wǎng)站自適應(yīng)，要設(shè)計(jì)很多套CSS，并且要結(jié)合jQuery，來實(shí)現(xiàn)自適應(yīng)不同的設(shè)備。種種顧慮使我一直不敢著手開刀，造成至今網(wǎng)站還只是一個PC版，而也沒有多做一個移動版。
經(jīng)常在群里看到大家都說移動流量怎么多怎么多，有的還說移動流量大大超過了PC流量，說移動流量的廣告點(diǎn)擊率也比PC流量高，潛移默化的作用，我也慢慢受到了感染，于是決定把網(wǎng)站改成自適應(yīng)！
我為什么是把網(wǎng)站改為自適應(yīng)，而不是改為一個單獨(dú)的移動站？因?yàn)榘俣葍A向于自適應(yīng)結(jié)構(gòu)的網(wǎng)站，更加容易獲得移動端排名。
先看看修改案例把：http://k80.zzidc.info
網(wǎng)站改為自適應(yīng)有多簡單？
下面就說說如何把網(wǎng)頁改為自適應(yīng)吧，需要懂一點(diǎn)html、一點(diǎn)css，而修改耗時對于一張普通網(wǎng)頁來說，確實(shí)需要大半天時間。
我把整個改動過程分為兩個步驟。
第一步，非常簡單，把如下代碼直接復(fù)制到里面。
<"Cache-Control" content="no-transform" />
<"Cache-Control" content="no-siteapp" />
<"viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
第二步，在CSS樣式表里加入如下css代碼
@media(max-width:960px)
{
}
這段css代碼，意思是在屏幕寬度小于960px的時候執(zhí)行的樣式，當(dāng)然你可以把960px改為其他更小的寬度，例如760px。
接下來，我們要做的就是把那些不需要在手機(jī)網(wǎng)頁上顯示的內(nèi)容隱藏掉。如何隱藏？這就需要看懂網(wǎng)頁的html代碼了，需要分析每一個模塊使用的div，例如頭部的div、導(dǎo)航欄的div、正文的div、側(cè)欄的div、頁腳的div，然后，我們就使用css隱藏不用顯示的div，代碼很簡單，就是display:none。
手機(jī)網(wǎng)頁只需顯示正文，我們把其他部分全部隱藏，代碼如下：
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#divMain img{max-width:90%}
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
這樣，當(dāng)在手機(jī)瀏覽網(wǎng)頁時，就只顯示正文了。
看了這個實(shí)例，是不是很簡單？網(wǎng)頁自適應(yīng)就是這樣做的！
不過要把手機(jī)網(wǎng)頁自適應(yīng)得有頭有尾，你還需要補(bǔ)充編寫一些代碼，例如編寫針對手機(jī)網(wǎng)頁的頭部、導(dǎo)航和頁腳的div，編寫后默認(rèn)為隱藏，在手機(jī)里再顯示。
如下圖所示網(wǎng)頁結(jié)構(gòu)：
手機(jī)網(wǎng)頁只需顯示正文，我們把其他部分全部隱藏，代碼如下：
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#divMain img{max-width:90%}
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
這樣，當(dāng)在手機(jī)瀏覽網(wǎng)頁時，就只顯示正文了。
看了這個實(shí)例，是不是很簡單？網(wǎng)頁自適應(yīng)就是這樣做的！
不過要把手機(jī)網(wǎng)頁自適應(yīng)得有頭有尾，你還需要補(bǔ)充編寫一些代碼，例如編寫針對手機(jī)網(wǎng)頁的頭部、導(dǎo)航和頁腳的div，編寫后默認(rèn)為隱藏，在手機(jī)里再顯示。
如下圖所示網(wǎng)頁結(jié)構(gòu)：
css就可以這樣寫
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#divMain img{max-width:90%}
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
#divHead_mobile{display:block}
#divNav_mobile{display:block}
#divBottom_mobile{display:block}
}
