行業動態快速重構傳統網站為響應式網站

發布：2019-03-02 13:07:26 瀏覽：5568

隨著手機用戶的快速增長,建立起自己的響應式網站成了很多企業和個人的需求。然而對于一個已有的傳統網站,如果完全拋棄原有網站,重新建立一個新的響應式網站,將造成成本的增加和資源的浪費。如果將傳統網站快速重構為響應式網站的方法,在不改動原有網站的基礎上,增加很少的工作量,就可以實現網站在移動設備上的完全適配。

一、幾種主要類型網站分析

1、傳統PC網站

基于PC端開發的普通網站可以展示詳盡的信息,頁面大、內容豐富,可以包含各種動畫、視頻、圖片等多媒體元素。由于采用電腦顯示器進行網頁瀏覽,網頁布局一般采用較寬的尺寸和較小的字體,以保證盡可能多的展示信息。網絡環境一般是有線或WLAN,上網速度相對快,網站開發不必過多考慮容量問題。PC端的網站更專注于網頁內容的詳盡和渲染風格的多樣。

2、手機網站

手機網站主要是在各種移動終端設備上瀏覽。由于各種終端設備本身的差異、設備使用環境的差異和上網速度的差異,使得手機網站的內容必須簡要,形式相對單一,必須能適配各種不同分辨率的終端設備,盡可能的考慮用戶體驗。

基于移動端開發的網站在瀏覽器設備和上網環境上受到了很大的局限,開發過程中更多的要考慮網站內容的簡約和用戶瀏覽的體驗。

目前用的較多的微網站就是手機網站的一種形式。它是基于微信入口的手機網站,除具有手機網站的一般特點外,企業和個人還能借助微信用戶,更準確的宣傳自己。微網站更加注重用戶的瀏覽體驗和交互性能,具有便捷性,隱私性,互動性,傳播力,關注力,成交率,轉化率,曝光率等特點。

3、響應式網站

響應式網站簡單說來,就是“一站開發,隨處可用”,能兼容各種終端,不用考慮為不同的屏幕設備定做版本。近年來,各種大屏幕移動設備的普及,響應式網站也受到了更多人的青睞。乃至很多人認為,響應式網站是實現友好移動目標的最佳方案。

響應式網站做到了“三站合一”,在網站開發和維護上大大降低成本,同時全方位宣傳自己。

二、關鍵技術分析

1、媒介查詢

媒介查詢具體來說,就是可以根據訪問端的介質情況和屏幕分辨率,調用不同的樣式來渲染頁面效果。通過響應式設計,可以實現跨平臺和跨設備的兼容。

通過CSS中的媒介查詢功能,可以為不同的設備類型定義不同的CSS樣式,在通過瀏覽網頁時,自動查詢媒體類型并調用對應的樣式,以實現對不同設備的適配。

2、彈性盒布局

CSS3引入了一種新的排版布局方式—彈性盒布局模型。使用該布局方式,可以更加高效的對容器中的元素進行布局、對齊和進行空間的分配。這種方式在不清楚容器尺寸或動態時也能執行。

3、圖片液態化

在響應式布局中,圖片需要適配不同寬度的屏幕,以給出最佳顯示方案,如水一樣會跟著寬度的變化而變化。一個網頁中的圖片分為內容圖片和背景圖片,可以分別對其進行“液態化”設置。

4、具體實現

將傳統網站重構為響應式網站時,要保證原有網站在PC端瀏覽的效果不變,同時要適配不同的移動設備。這就要求對原有網站進行分析,不破壞原有網站的HTML結構,只是通過新建CSS來滿足移動設備的瀏覽。

①、分析網站、取舍內容

由于移動設備屏幕寬度及上網環境的限制,不可能將傳統網站中的內容全部顯示。在取舍內容時可以保留網站中最重要的部分,對可有可無的內容要舍棄,對比較耗流量的背景圖要舍棄。手機網站中的每個頁面都是最應該呈現給用戶的內容,頁面簡潔,無需過多的背景修飾。

②、編寫響應式網站樣式表

在對內容進行取舍后,再針對移動設備編寫響應的樣式表文件。在樣式表文件中要對不顯示的內容的進行隱藏,對剩下內容的顯示實現自適應。

③、為頁面應用樣式

通過CSS3的媒體查詢設置,可以根據具體設備情況,為網頁加載不同的CSS樣式表,以實現在不同設備上的相同瀏覽體驗。

5、測試

在PC端使用IE瀏覽器、谷歌瀏覽器和火狐瀏覽器打開網頁,并改變窗口大小,網頁中的圖片、文字、背景及其他網頁元素均能正常顯示,并能保持良好的布局。在平板電腦和手機上打開網頁,網頁中各元素均能正常顯示,并保持良好布局。測試結果表明,重構后的頁面,具有很好的適配性。