標籤:設計 有用 點擊率 部分 page 使用 log 擴充 目的
部落格地址:https://www.cnblogs.com/zxtceq/p/5714606.html一天完成把PC網站改為自適應!原來這麼簡單!
http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html
一天完成把PC網站改為自適應!原來這麼簡單!作者:Kaka 時間:2015-8-27 11:26:9 瀏覽:5279 評論:8
網站自適應,很多人都認為是很進階需要很多時間去實現的東西,不願意去把一個現成的網站改成自適應,寧願單獨另外做一個移動站。我之前覺得實現網站自適應,要設計很多套CSS,並且要結合jQuery,來實現自適應不同的裝置。我還以為要重新設計文章的圖片,或者要用到JavaScript來控製圖片尺寸,因為圖片過大就會超出手機螢幕,而這個工作量是非常可怕的。種種顧慮使我一直不敢著手開刀,造成至今網站還只是一個PC版,而也沒有多做一個移動版。
經常在群裡看到大家都說移動流量怎麼多怎麼多,有的還說移動流量大大超過了PC流量,說移動流量的廣告點選率也比PC流量高,潛移默化的作用,我也慢慢受到了感染,於是決定把網站改成自適應!
我為什麼是把網站改為自適應,而不是改為一個單獨的移動站?因為我想一勞百逸,不想同時維護PC站和移動站,這將為日後更新文章節省大量的時間。
由於是第一次接觸,沒有實際經驗,所以需要邊找資料看案例邊修改代碼。
令我感到非常意外的是,我竟然僅需一天時間就完成了修改工作!
先看看我的修改成果吧
PC版網頁
PC版網頁
手機版網頁
手機版網頁
此手機版顯示的內容比較少,事實上,手機版網頁中,在文章結尾也顯示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)看看,我的部落格就是這樣自適應的!
分類: PC網站轉換成手機版
PC網站轉換成手機版