<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" /> |
<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)頁只需顯示正文,我們把其他部分全部隱藏,代碼如下
<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)
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> |
版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!
轉(zhuǎn)載請注明: 網(wǎng)站如何做到自適應(yīng)