深圳公司網站建設_深圳公司網站自然排名優化首選壹網互聯!
當前位置
首頁 - 前端Js+Css教程 - 一天完成把PC網站改為自適應!

一天完成把PC網站改為自適應!

發布時間:2017-06-15 閱讀:964

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

下面就說說如何把網頁改為自適應吧,我為什么說很簡單?因為你不需要任何高深的網頁設計技術,你只需要懂一點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>

至此,你就可以自適應設計出一個漂亮的手機版頁面了。

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


  • 評論內容:

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

聯系我們
CONTACT US

深圳網站建設電話:13510778477 姚先生

深圳網站推廣電話:13715035554 劉先生

地址:深圳市南山區西麗鎮龍珠五路南汾大廈416

广东11选5奇偶走势图