花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

網(wǎng)站如何做到自適應(yīng)

時間: 2017-10-16 02:54 閱讀: 作者:素材無憂網(wǎng)

網(wǎng)站自適應(yīng),很多人都認為是很高級需要很多時間去實現(xiàn)的東西,不愿意去把一個現(xiàn)成的網(wǎng)站改成自適應(yīng),寧愿單獨另外做一個移動站。我之前覺得實現(xiàn)網(wǎng)站自適應(yīng),要設(shè)計很多套CSS,并且要結(jié)合jQuery,來實現(xiàn)自適應(yīng)不同的設(shè)備。我還以為要重新設(shè)計文章的圖片,或者要用到JavaScript來控制圖片尺寸,因為圖片過大就會超出手機屏幕,而這個工作量是非??膳碌摹7N種顧慮使我一直不敢著手開刀,造成至今網(wǎng)站還只是一個PC版,而也沒有多做一個移動版。
我為什么是把網(wǎng)站改為自適應(yīng),而不是改為一個單獨的移動站?因為我想一勞百逸,不想同時維護PC站和移動站,這將為日后更新文章節(jié)省大量的時間。
下面就說說如何把網(wǎng)頁改為自適應(yīng)吧,我為什么說很簡單?因為你不需要任何高深的網(wǎng)頁設(shè)計技術(shù),你只需要懂一點html、一點css,而修改耗時對于一張普通網(wǎng)頁來說,確實只需幾個小時
第一步,非常簡單,把如下代碼直接復(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" />

第二步,在<head></head>里加上如下css代碼或者在相關(guān)調(diào)用css里
<style type="text/css"> 
@media(max-width:960px)
{
  
}
</style>

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

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

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

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

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

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

 

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

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

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

    /* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
    #pHead{display:none}
    #pNav{display:none}
    #pSide{display:none}
    #pBottom{display:none}
}
</style>

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

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

看了這個實例,是不是很簡單?網(wǎng)頁自適應(yīng)就是這樣做的!

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

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

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

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

css就可以這樣寫
 

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

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

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

    /* 隱藏頭部、導(dǎo)航、側(cè)欄、頁腳 */
    #pHead{display:none}
    #pNav{display:none}
    #pSide{display:none}
    #pBottom{display:none}

    /* 顯示手機版頭部、導(dǎo)航和頁腳 */
    #pHead_mobile{display:block}
    #pNav_mobile{display:block}
    #pBottom_mobile{display:block}
}
</style>

這樣,自適應(yīng)網(wǎng)站就做成了

版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!

轉(zhuǎn)載請注明: 網(wǎng)站如何做到自適應(yīng)

標簽: 網(wǎng)站  
相關(guān)文章
模板推薦