中國最具競(jìng)爭(zhēng)力的網(wǎng)絡(luò)營銷咨詢、培訓(xùn)及技術(shù)服務(wù)機(jī)構(gòu)

返回首頁 / 手機(jī)網(wǎng)站 / 聯(lián)系我們


商丘網(wǎng)絡(luò)公司自適應(yīng)站這樣做老站不用花錢自己該

發(fā)布時(shí)間：2018-04-13 23:20 來源： 作者：admin    點(diǎn)擊數(shù)：次

下面就說說如何把網(wǎng)頁改為自適應(yīng)吧，我為什么說很簡(jiǎn)單？因?yàn)槟悴恍枰魏胃呱畹木W(wǎng)頁設(shè)計(jì)技術(shù)，你只需要懂一點(diǎn)html、一點(diǎn)css，而修改耗時(shí)對(duì)于一張普通網(wǎng)頁來說，確實(shí)只需幾個(gè)小時(shí)。

我把整個(gè)改動(dòng)過程分為兩個(gè)步驟。

第一步，非常簡(jiǎn)單，把如下代碼直接復(fù)制到<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" />

前面兩個(gè)meta，no-siteapp和no-transform，是告訴搜索引擎不要把網(wǎng)頁轉(zhuǎn)碼。第三個(gè)meta，聲明網(wǎng)頁可以縮小放大。

第二步，在<head></head>里加上如下css代碼。

<style type="text/css"> 
@media(max-width:960px)
{
  
}
</style>

這段css代碼，意思是在屏幕寬度小于960px的時(shí)候執(zhí)行的樣式，當(dāng)然你可以把960px改為其他更小的寬度，例如760px。

接下來，我們要做的就是把那些不需要在手機(jī)網(wǎng)頁上顯示的內(nèi)容隱藏掉。如何隱藏？這就需要看懂網(wǎng)頁的html代碼了，需要分析每一個(gè)模塊使用的div，例如頭部的div、導(dǎo)航欄的div、正文的div、側(cè)欄的div、頁腳的div，然后，我們就使用css隱藏不用顯示的div，代碼很簡(jiǎn)單，就是display:none。

舉例說明，比如網(wǎng)頁結(jié)構(gòu)如下圖所示：

網(wǎng)頁結(jié)構(gòu)圖

網(wǎng)頁結(jié)構(gòu)圖

手機(jī)網(wǎng)頁只需顯示正文，我們把其他部分全部隱藏，代碼如下：

<style type="text/css"> 
@media(max-width:960px)
{
     /* 網(wǎng)頁全屏顯示 */
    body {width:100%;} 

    /* 正文全屏顯示 */
    #divMain{width:100%} 

    /* 為了避免正文圖片超出屏幕寬度 */
    /* 正文圖片寬度最多是屏幕寬度的90% */
    #divMain img{max-width:90%} 

    /* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
    #divHead{display:none}
    #divNav{display:none}
    #divSide{display:none}
    #divBottom{display:none}
}
</style>

這樣，當(dāng)在手機(jī)瀏覽網(wǎng)頁時(shí)，就只顯示正文了。

網(wǎng)頁自適應(yīng)就是這樣做的！

看了這個(gè)實(shí)例，是不是很簡(jiǎn)單？網(wǎng)頁自適應(yīng)就是這樣做的！

不過要把手機(jī)網(wǎng)頁自適應(yīng)得有頭有尾，你還需要補(bǔ)充編寫一些代碼，例如編寫針對(duì)手機(jī)網(wǎng)頁的頭部、導(dǎo)航和頁腳的div，編寫后默認(rèn)為隱藏，在手機(jī)里再顯示。

如下圖所示網(wǎng)頁結(jié)構(gòu)：

包含手機(jī)模塊的網(wǎng)頁結(jié)構(gòu)

包含手機(jī)模塊的網(wǎng)頁結(jié)構(gòu)

css就可以這樣寫

<style type="text/css"> 
/* 默認(rèn)隱藏手機(jī)版頭部、導(dǎo)航和頁腳 */
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
     /* 網(wǎng)頁全屏顯示 */
    body {width:100%;} 

    /* 正文全屏顯示 */
    #divMain{width:100%} 

    /* 為了避免正文圖片超出屏幕寬度 */
    /* 正文圖片寬度最多是屏幕寬度的90% */
    #divMain img{max-width:90%} 

    /* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
    #divHead{display:none}
    #divNav{display:none}
    #divSide{display:none}
    #divBottom{display:none}

    /* 顯示手機(jī)版頭部、導(dǎo)航和頁腳 */
    #divHead_mobile{display:block}
    #divNav_mobile{display:block}
    #divBottom_mobile{display:block}
}
</style>

至此，你就可以自適應(yīng)設(shè)計(jì)出一個(gè)漂亮的手機(jī)版頁面了。


[商丘網(wǎng)絡(luò)公司自適應(yīng)站這樣做老站不用花錢自己該]

本文鏈接：http://njylbyy.cn/jzjswz/375.html
tag:
上一篇： 商丘做網(wǎng)站DedeCMS定時(shí)自動(dòng)生成站點(diǎn)地圖sitemap.xml的實(shí)現(xiàn)方法 下一篇： 商丘新科技網(wǎng)絡(luò)公司怎么樣做網(wǎng)站推廣？
相關(guān)文章