• <bdo id="wwck2"><u id="wwck2"></u></bdo>
  • <optgroup id="wwck2"></optgroup>
    <tt id="wwck2"></tt>
  • 記憶盒子

    把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

    首頁搜索目錄
    search
    當前主題: 互聯網絡

    一天完成把PC網站改為自適應!原來這么簡單!

    作者:Kaka    時間:2015-8-27 11:26:9    瀏覽:    評論:8

    網站自適應,很多人都認為是很高級需要很多時間去實現的東西,不愿意去把一個現成的網站改成自適應,寧愿單獨另外做一個移動站。我之前覺得實現網站自適應,要設計很多套CSS,并且要結合jQuery,來實現自適應不同的設備。我還以為要重新設計文章的圖片,或者要用到JavaScript來控制圖片尺寸,因為圖片過大就會超出手機屏幕,而這個工作量是非常可怕的。種種顧慮使我一直不敢著手開刀,造成至今網站還只是一個PC版,而也沒有多做一個移動版。

    經常在群里看到大家都說移動流量怎么多怎么多,有的還說移動流量大大超過了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-siteappno-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.zm108.com/blog)看看,我的博客就是這樣自適應的!

    自適應設計必讀

    自適應網站設計對百度友好的關鍵

    自適應網頁設計代碼需要做的6大調整

    標簽: 自適應  

    加入本站QQ群(312716741),交流分享網站建設、優化、SEO技術。。。

     

    • 擴展閱讀
    上一篇: 為zblog FCKeditor編輯器添加設置字體格式h1 h2功能
    下一篇: zblog管理登錄驗證碼不顯示的原因
    • 8.x*********
    • 響應式網站案例,歡迎大家訪問,提出改進意見!!
      Kaka 于 2016-4-7 18:28:33 回復
      整體很不錯呀,只是下面的“聯系電話”背景圖在小屏幕時不縮小,需要改進下。
    • 2016-4-7 18:23:39 回復該留言
    • 5.易***
    • 民間也藏龍臥虎,樓主讓我領略了創新式思維的絕對優勢。太厲害了!!嘿嘿
    • 2015-10-4 1:02:47 回復該留言
    • 3.A****
    • 評論還沒法用英文名稱??
      Kaka 于 2015-9-6 22:33:25 回復
      可以用英文的,可能你的某關鍵詞在屏蔽列表里。
      Aaron 于 2015-9-7 22:06:08 回復
      從你這扒了JS源碼待用,哈哈
    • 2015-9-6 22:26:05 回復該留言
    • 2.張*
    • 哈哈,晚上剛完成了簡單自適應的調整
      不過準備對主題大調整,所以暫時沒去像你這樣調整的如此徹底
      Kaka 于 2015-9-6 22:32:02 回復
      你的也不錯哦,頭部現在還缺少欄目導航,返回頂部也還沒做,另外,對廣告代碼的加載你沒有處理,如果在手機里不用顯示廣告,就應該在手機里不用加載廣告代碼,否則嚴重拖慢速度的。
      Aaron 于 2015-9-9 21:13:12 回復
      你這樣的加載方式不違反Adsense規則嗎?
      Kaka 于 2015-9-9 21:28:52 回復
      不違反的,通過js document.write輸出,并沒有更改廣告代碼。
    • 2015-9-6 22:25:30 回復該留言

    發表評論:

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    訂閱博客                   QQ交流群(312716741)

    • 通過Google訂閱本站 通過鮮果訂閱本站 通過抓蝦訂閱本站
    • 通過QQ郵箱訂閱本站 通過Yahoo訂閱本站 通過有道訂閱本站

    Search

    最新評論及回復

    最近留言

    網站分類

    Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

    Copyright @2009-2019 All Rights Reserved. 粵ICP備14028160號-1

    Powered By Z-Blog 1.8 Walle Build 91204
    Copyright @2009-2019 All Rights Reserved.
    微拍福利