網(wǎng)站自適應(yīng)，很多人都認(rèn)為是很高級需要很多時間去實現(xiàn)的東西，不愿意去把一個現(xiàn)成的網(wǎng)站改成自適應(yīng)，寧愿單獨另外做一個移動站。我之前覺得實現(xiàn)網(wǎng)站自適應(yīng)，要設(shè)計很多套CSS，并且要結(jié)合jQuery，來實現(xiàn)自適應(yīng)不同的設(shè)備。我還以為要重新設(shè)計文章的圖片，或者要用到JavaScript來控制圖片尺寸，因為圖片過大就會超出手機(jī)屏幕，而這個工作量是非常可怕的。種種顧慮使我一直不敢著手開刀，造成至今網(wǎng)站還只是一個PC版，而也沒有多做一個移動版。
經(jīng)常在群里看到大家都說移動流量怎么多怎么多，有的還說移動流量大大超過了PC流量，說移動流量的廣告點擊率也比PC流量高，潛移默化的作用，我也慢慢受到了感染，于是決定把網(wǎng)站改成自適應(yīng)！
我為什么是把網(wǎng)站改為自適應(yīng)，而不是改為一個單獨的移動站？因為我想一勞百逸，不想同時維護(hù)PC站和移動站，這將為日后更新文章節(jié)省大量的時間。
由于是第一次接觸，沒有實際經(jīng)驗，所以需要邊找資料看案例邊修改代碼。
令我感到非常意外的是，我竟然僅需一天時間就完成了修改工作！
先看看我的修改成果吧
PC版網(wǎng)頁
PC版網(wǎng)頁
手機(jī)版網(wǎng)頁
手機(jī)版網(wǎng)頁
此手機(jī)版效果圖顯示的內(nèi)容比較少，事實上，手機(jī)版網(wǎng)頁中，在文章結(jié)尾也顯示Google廣告，文章結(jié)尾還有用戶留言，用戶照樣可以在手機(jī)上評論，此外，“擴(kuò)展閱讀”后面還顯示了PC版中的側(cè)欄幾個欄目的文章列表，最后，在頁尾的搜索框著色層上方投放了百度移動的自適應(yīng)廣告。
網(wǎng)站改為自適應(yīng)有多簡單？
下面就說說如何把網(wǎng)頁改為自適應(yīng)吧，我為什么說很簡單？因為你不需要任何高深的網(wǎng)頁設(shè)計技術(shù)，你只需要懂一點html、一點css，而修改耗時對于一張普通網(wǎng)頁來說，確實只需幾個小時。
我把整個改動過程分為兩個步驟。
第一步，非常簡單，把如下代碼直接復(fù)制到<head></head>里面。
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
前面兩個meta，no-siteapp和no-transform，是告訴搜索引擎不要把網(wǎng)頁轉(zhuǎn)碼。第三個meta，聲明網(wǎng)頁可以縮小放大。
第二步，在<head></head>里加上如下css代碼。
<style type="text/css">
@media(max-width:960px)
{
}
</style>
這段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。
舉例說明，比如網(wǎng)頁結(jié)構(gòu)如下圖所示：
網(wǎng)頁結(jié)構(gòu)圖
手機(jī)網(wǎng)頁只需顯示正文，我們把其他部分全部隱藏，代碼如下：
<style type="text/css">
@media(max-width:960px)
{
/* 網(wǎng)頁全屏顯示 */
body {width:100%;}
/* 正文全屏顯示 */
#divMain{width:100%}
/* 為了避免正文圖片超出屏幕寬度 */
/* 正文圖片寬度最多是屏幕寬度的90% */
#divMain img{max-width:90%}
/* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
</style>
這樣，當(dāng)在手機(jī)瀏覽網(wǎng)頁時，就只顯示正文了。
網(wǎng)頁自適應(yīng)就是這樣做的！
看了這個實例，是不是很簡單？網(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)頁結(jié)構(gòu)
css就可以這樣寫
<style type="text/css">
/* 默認(rèn)隱藏手機(jī)版頭部、導(dǎo)航和頁腳 */
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
/* 網(wǎng)頁全屏顯示 */
body {width:100%;}
/* 正文全屏顯示 */
#divMain{width:100%}
/* 為了避免正文圖片超出屏幕寬度 */
/* 正文圖片寬度最多是屏幕寬度的90% */
#divMain img{max-width:90%}
/* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
/* 顯示手機(jī)版頭部、導(dǎo)航和頁腳 */
#divHead_mobile{display:block}
#divNav_mobile{display:block}
#divBottom_mobile{display:block}
}
</style>
至此，你就可以自適應(yīng)設(shè)計出一個漂亮的手機(jī)版頁面了。
看完這個實例，是不是覺得自適應(yīng)設(shè)計其實是非常容易的呢？當(dāng)然了，這只是一個最基本的自適應(yīng)設(shè)計，著重是介紹思路，你可以在此思路的指引下，完成更加復(fù)雜的設(shè)計。你用電腦和手機(jī)瀏覽我的博客（http://gazebo2go.com/blog）看看，我的博客就是這樣自適應(yīng)的！
自適應(yīng)設(shè)計必讀
自適應(yīng)網(wǎng)站設(shè)計對百度友好的關(guān)鍵
自適應(yīng)網(wǎng)頁設(shè)計代碼需要做的6大調(diào)整
