隨著互聯網WEB前端技術的發展,各項技術誕生,BS架構、HTML5、CSS3、JQ各種新的技術出現在我們的面前,今天我們就分享下只有PC站情況下,如何快速做成自適應結構,滿足移動端用戶體驗。
網站自適應結構很多人認為很麻煩,望而卻步,寧愿單獨另外做一個移動站。因為要做成自適應結構確實需要一定的技術才行。但是深入研究下還是不麻煩的,之前小編認為實現網站自適應,要設計很多套CSS,并且要結合jQuery,來實現自適應不同的設備。種種顧慮使我一直不敢著手開刀,造成至今網站還只是一個PC版,而也沒有多做一個移動版。
經常在群里看到大家都說移動流量怎么多怎么多,有的還說移動流量大大超過了PC流量,說移動流量的廣告點擊率也比PC流量高,潛移默化的作用,我也慢慢受到了感染,于是決定把網站改成自適應!
我為什么是把網站改為自適應,而不是改為一個單獨的移動站?因為百度傾向于自適應結構的網站,更加容易獲得移動端排名。
先看看修改案例把:http://k80.zzidc.info
網站改為自適應有多簡單?
下面就說說如何把網頁改為自適應吧,需要懂一點html、一點css,而修改耗時對于一張普通網頁來說,確實需要大半天時間。
我把整個改動過程分為兩個步驟。
第一步,非常簡單,把如下代碼直接復制到里面。
<"Cache-Control" content="no-transform" />
<"Cache-Control" content="no-siteapp" />
<"viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
第二步,在CSS樣式表里加入如下css代碼
@media(max-width:960px)
{
}
這段css代碼,意思是在屏幕寬度小于960px的時候執行的樣式,當然你可以把960px改為其他更小的寬度,例如760px。
接下來,我們要做的就是把那些不需要在手機網頁上顯示的內容隱藏掉。如何隱藏?這就需要看懂網頁的html代碼了,需要分析每一個模塊使用的div,例如頭部的div、導航欄的div、正文的div、側欄的div、頁腳的div,然后,我們就使用css隱藏不用顯示的div,代碼很簡單,就是display:none。
手機網頁只需顯示正文,我們把其他部分全部隱藏,代碼如下:
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#divMain img{max-width:90%}
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
這樣,當在手機瀏覽網頁時,就只顯示正文了。
看了這個實例,是不是很簡單?網頁自適應就是這樣做的!
不過要把手機網頁自適應得有頭有尾,你還需要補充編寫一些代碼,例如編寫針對手機網頁的頭部、導航和頁腳的div,編寫后默認為隱藏,在手機里再顯示。
如下圖所示網頁結構:
手機網頁只需顯示正文,我們把其他部分全部隱藏,代碼如下:
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#divMain img{max-width:90%}
#divHead{display:none}
#divNav{display:none}
#divSide{display:none}
#divBottom{display:none}
}
這樣,當在手機瀏覽網頁時,就只顯示正文了。
看了這個實例,是不是很簡單?網頁自適應就是這樣做的!
不過要把手機網頁自適應得有頭有尾,你還需要補充編寫一些代碼,例如編寫針對手機網頁的頭部、導航和頁腳的div,編寫后默認為隱藏,在手機里再顯示。
如下圖所示網頁結構:
css就可以這樣寫
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@media(max-width:960px)
{
body {width:100%;}
#divMain{width:100%}
#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}
}
本文地址:http://www.yxrxyy.live/news/1803.html
發表評論
評論列表(條)