常州布谷鳥網絡,常州網絡公司,常州網站設計,常州小程序,常州APP開發,常州小程序開發公司,常州網站建設,常州微信公眾號維護
SO EASY!一天完成把PC網站改為自適應!
2020-12-3 8:50:37

網站自適應,很多人都認為是很高級需要很多時間去實現的東西,不愿意去把一個現成的網站改成自適應,寧愿單獨另外做一個移動站。我之前覺得實現網站自適應,要設計很多套CSS,并且要結合jQuery,來實現自適應不同的設備。我還以為要重新設計文章的圖片,或者要用到JavaScript來控制圖片尺寸,因為圖片過大就會超出手機屏幕,而這個工作量是非常可怕的。種種顧慮使我一直不敢著手開刀,造成至今網站還只是一個PC版,而也沒有多做一個移動版。

經常在群里看到大家都說移動流量怎么多怎么多,有的還說移動流量大大超過了PC流量,說移動流量的廣告點擊率也比PC流量高,潛移默化的作用,我也慢慢受到了感染,于是決定把網站改成自適應!

我為什么是把網站改為自適應,而不是改為一個單獨的移動站?因為我想一勞百逸,不想同時維護PC站和移動站,這將為日后更新文章節省大量的時間。

由于是第一次接觸,沒有實際經驗,所以需要邊找資料看案例邊修改代碼。

令我感到非常意外的是,我竟然僅需一天時間就完成了修改工作!

先看看我的修改成果吧

PC版網頁

PC版網頁

PC版網頁

手機版網頁

手機版網頁

手機版網頁

此手機版效果圖顯示的內容比較少,事實上,手機版網頁中,在文章結尾也顯示Google廣告,文章結尾還有用戶留言,用戶照樣可以在手機上評論,此外,“擴展閱讀”后面還顯示了PC版中的側欄幾個欄目的文章列表,最后,在頁尾的搜索框著色層上方投放了百度移動的自適應廣告。

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

下面就說說如何把網頁改為自適應吧,我為什么說很簡單?因為你不需要任何高深的網頁設計技術,你只需要懂一點html、一點css,而修改耗時對于一張普通網頁來說,確實只需幾個小時。

我把整個改動過程分為兩個步驟。

第一步,非常簡單,把如下代碼直接復制到里面。

 

前面兩個meta,no-siteapp和no-transform,是告訴搜索引擎不要把網頁轉碼。第三個meta,聲明網頁可以縮小放大。

第二步,在里加上如下css代碼。

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

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

舉例說明,比如網頁結構如下圖所示:

網頁結構圖

網頁結構圖

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

這樣,當在手機瀏覽網頁時,就只顯示正文了。

網頁自適應就是這樣做的!

看了這個實例,是不是很簡單?網頁自適應就是這樣做的!

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

如下圖所示網頁結構:

包含手機模塊的網頁結構

包含手機模塊的網頁結構

css就可以這樣寫

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

看完這個實例,是不是覺得自適應設計其實是非常容易的呢?當然了,這只是一個最基本的自適應設計,著重是介紹思路,你可以在此思路的指引下,完成更加復雜的設計。你用電腦和手機瀏覽我的博客(http://www.webkaka.com/blog)看看,我的博客就是這樣自適應的!





作者:Kaka (來源:卡卡測速網

[聲明] 本文系本網編輯轉載,轉載目的在于傳遞更多信息,并不代表本網贊同其觀點和對其真實性負責。如涉及作品內容、版權和其它問題,請在30日內與本網郵箱 7016867@qq.com 聯系,我們將在第一時間刪除內容!
Design By 布谷鳥網絡 Since 2004 | 常州網絡公司 | 常州網站設計 | 常州網頁設計 | 常州小程序開發公司 | 常州微信商城設計 | 常州微信公眾號商城 | 常州小程序商城 | 網站地圖 |
本站由 為布谷鳥網絡(www.333400.tw)提供云計算與安全服務 蘇ICP備12074670號-1
广东快乐十分走势图快朱乐十分 河南11选5投注技巧 浙江快乐12推荐号码推荐 买彩票中奖 白小姐点解玄机c 北京三分彩是真是假 秒速赛车玩法规律_Welcome 广西快三溃漏值 北京时时彩赛车论坛 快乐赛车官方开奖号码 河内5分彩号码破解 mg真人游戏线上 2021波叔一波中特彩图 幸运农场杀19码技巧 黑龙江快乐十分今日走势图 河北快三双和值遗漏分析 天津快乐10分开奖视频