代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

純PC網站模板改為自適應模板方法

來源:未知 發布時間:2019-10-10熱度:我要評論
隨著互聯網WEB前端技術的發展,各項技術誕生,BS架構、HTML5、CSS3、JQ各種新的技術出現在我們的面前,今天我們就分享下只有PC站情況下,如何快速做成自適應結構,滿足移動端用戶體驗。 ...

織夢模板免費下載,無需注冊無需充值

隨著互聯網WEB前端技術的發展,各項技術誕生,BS架構、HTML5、CSS3、JQ各種新的技術出現在我們的面前,今天我們就分享下只有PC站情況下,如何快速做成自適應結構,滿足移動端用戶體驗。

網站自適應結構很多人認為很麻煩,望而卻步,寧愿單獨另外做一個移動站。因為要做成自適應結構確實需要一定的技術才行。但是深入研究下還是不麻煩的,之前小編認為實現網站自適應,要設計很多套CSS,并且要結合jQuery,來實現自適應不同的設備。種種顧慮使我一直不敢著手開刀,造成至今網站還只是一個PC版,而也沒有多做一個移動版。

經常在群里看到大家都說移動流量怎么多怎么多,有的還說移動流量大大超過了PC流量,說移動流量的廣告點擊率也比PC流量高,潛移默化的作用,我也慢慢受到了感染,于是決定把網站改成自適應!

我為什么是把網站改為自適應,而不是改為一個單獨的移動站?因為百度傾向于自適應結構的網站,更加容易獲得移動端排名。

先看看修改案例把:http://k80.zzidc.info

網站改為自適應有多簡單?

下面就說說如何把網頁改為自適應吧,需要懂一點html、一點css,而修改耗時對于一張普通網頁來說,確實需要大半天時間。

我把整個改動過程分為兩個步驟。

第一步,非常簡單,把如下代碼直接復制到里面。

<"Cache-Control" content="no-transform" /> 

<"Cache-Control" content="no-siteapp" />

<"viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

 
前面兩個meta,no-siteapp和no-transform,是告訴搜索引擎不要把網頁轉碼。第三個meta,聲明網頁可以縮小放大。
 

第二步,在CSS樣式表里加入如下css代碼

@media(max-width:960px)

{

}

這段css代碼,意思是在屏幕寬度小于960px的時候執行的樣式,當然你可以把960px改為其他更小的寬度,例如760px。

接下來,我們要做的就是把那些不需要在手機網頁上顯示的內容隱藏掉。如何隱藏?這就需要看懂網頁的html代碼了,需要分析每一個模塊使用的div,例如頭部的div、導航欄的div、正文的div、側欄的div、頁腳的div,然后,我們就使用css隱藏不用顯示的div,代碼很簡單,就是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}

}

 

這樣,當在手機瀏覽網頁時,就只顯示正文了。

看了這個實例,是不是很簡單?網頁自適應就是這樣做的!

不過要把手機網頁自適應得有頭有尾,你還需要補充編寫一些代碼,例如編寫針對手機網頁的頭部、導航和頁腳的div,編寫后默認為隱藏,在手機里再顯示。

如下圖所示網頁結構:

 

手機網頁只需顯示正文,我們把其他部分全部隱藏,代碼如下:

@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}

}

這樣,當在手機瀏覽網頁時,就只顯示正文了。

看了這個實例,是不是很簡單?網頁自適應就是這樣做的!

不過要把手機網頁自適應得有頭有尾,你還需要補充編寫一些代碼,例如編寫針對手機網頁的頭部、導航和頁腳的div,編寫后默認為隱藏,在手機里再顯示。

如下圖所示網頁結構:

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}

}

至此,你就可以自適應設計出一個漂亮的手機版頁面了。
 
看完這個實例,是不是覺得自適應設計其實是非常容易的呢?當然了,這只是一個最基本的自適應設計,著重是介紹思路,你可以在此思路的指引下,完成更加復雜的設計。

 

本文地址:http://www.alolpiu.com.cn/news/1803.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      新时时彩中奖怎么查