一天完成把PC網站改成自適應！原來這麼簡單！
網站自適應，不少人都認爲是很高級須要不少時間去實現的東西，不肯意去把一個現成的網站改爲自適應，寧願單獨另外作一個移動站。我以前以爲實現網站自適應，要設計不少套CSS，而且要結合jQuery，來實現自適應不一樣的設備。我還覺得要從新設計文章的圖片，或者要用到JavaScript來控制圖片尺寸，由於圖片過大就會超出手機屏幕，而這個工做量是很是可怕的。種種顧慮使我一直不敢着手開刀，形成至今網站還只是一個PC版，而也沒有多作一個移動版。css
常常在羣裏看到你們都說移動流量怎麼多怎麼多，有的還說移動流量大大超過了PC流量，說移動流量的廣告點擊率也比PC流量高，潛移默化的做用，我也慢慢受到了感染，因而決定把網站改爲自適應！html
我爲何是把網站改成自適應，而不是改成一個單獨的移動站？由於我想一勞百逸，不想同時維護PC站和移動站，這將爲往後更新文章節省大量的時間。web
因爲是第一次接觸，沒有實際經驗，因此須要邊找資料看案例邊修改代碼。app
令我感到很是意外的是，我居然僅需一天時間就完成了修改工做！ide
先看看個人修改爲果吧網站
PC版網頁ui
PC版網頁搜索引擎
手機版網頁scala
手機版網頁設計
此手機版效果圖顯示的內容比較少，事實上，手機版網頁中，在文章結尾也顯示Google廣告，文章結尾還有用戶留言，用戶照樣能夠在手機上評論，此外，「擴展閱讀」後面還顯示了PC版中的側欄幾個欄目的文章列表，最後，在頁尾的搜索框着色層上方投放了百度移動的自適應廣告。
網站改成自適應有多簡單？
下面就說說如何把網頁改成自適應吧，我爲何說很簡單？由於你不須要任何高深的網頁設計技術，你只須要懂一點html、一點css，而修改耗時對於一張普通網頁來講，確實只需幾個小時。
我把整個改動過程分爲兩個步驟。
第一步，很是簡單，把以下代碼直接複製到<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，是告訴搜索引擎不要把網頁轉碼。第三個meta，聲明網頁能夠縮小放大。
第二步，在<head></head>里加上以下css代碼。
<style type="text/css">
@media(max-width:960px)
{
}
</style>
這段css代碼，意思是在屏幕寬度小於960px的時候執行的樣式，固然你能夠把960px改成其餘更小的寬度，例如760px。
接下來，咱們要作的就是把那些不須要在手機網頁上顯示的內容隱藏掉。如何隱藏？這就須要看懂網頁的html代碼了，須要分析每個模塊使用的div，例如頭部的div、導航欄的div、正文的div、側欄的div、頁腳的div，而後，咱們就使用css隱藏不用顯示的div，代碼很簡單，就是display:none。
舉例說明，好比網頁結構以下圖所示：
網頁結構圖
手機網頁只需顯示正文，咱們把其餘部分所有隱藏，代碼以下：
<style type="text/css">
@media(max-width:960px)
{
/* 網頁全屏顯示 */
body {width:100%;}
/* 正文全屏顯示 */
#divMain{width:100%}
/* 爲了不正文圖片超出屏幕寬度 */
/* 正文圖片寬度最可能是屏幕寬度的90% */
#divMain img{max-width:90%}
/* 隱藏頭部、導航、側欄、頁腳 */
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
</style>
這樣，當在手機瀏覽網頁時，就只顯示正文了。
網頁自適應就是這樣作的！
看了這個實例，是否是很簡單？網頁自適應就是這樣作的！
不過要把手機網頁自適應得有頭有尾，你還須要補充編寫一些代碼，例如編寫針對手機網頁的頭部、導航和頁腳的div，編寫後默認爲隱藏，在手機裏再顯示。
以下圖所示網頁結構：
包含手機模塊的網頁結構
css就能夠這樣寫
<style type="text/css">
/* 默認隱藏手機版頭部、導航和頁腳 */
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
/* 網頁全屏顯示 */
body {width:100%;}
/* 正文全屏顯示 */
#divMain{width:100%}
/* 爲了不正文圖片超出屏幕寬度 */
/* 正文圖片寬度最可能是屏幕寬度的90% */
#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}
}
</style>
至此，你就能夠自適應設計出一個漂亮的手機版頁面了。
看完這個實例，是否是以爲自適應設計實際上是很是容易的呢？固然了，這只是一個最基本的自適應設計，着重是介紹思路，你能夠在此思路的指引下，完成更加複雜的設計。你用電腦和手機瀏覽個人博客（http://www.webkaka.com/blog）看看，個人博客就是這樣自適應的！
- 1. 一天完成把PC網站改成自適應！原來這麼簡單！
- 2. 建站原來這麼簡單，呵呵
- 3. WordPress網站直接生成微信小程序原來這麼簡單
- 4. 如何快速把PC網站模板改爲自適應模板
- 5. 原來python開發後端服務器還可以這麼簡單（未完成）
- 6. 原來python開發後端服務器還能夠這麼簡單（未完成）
- 7. PDF文件轉換成CAD，原來這麼簡單！
- 8. 原來功能測試轉成自動化測試這麼簡單？
- 9. sublime 怎麼把菜單改成中文
- 10. java 自適應響應式 網站 源碼 SSM 生成 靜態化 手機 平板 PC 企業站源碼
- 更多相關文章...
- • Eclipse 生成jar包 - Eclipse 教程
- • DTD - 來自網絡的實例 - DTD 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。