快速重構傳統網站為響應式網站的方法研究

徐文平

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

【關鍵詞】響應式網站 傳統網站 重構

1 引言

去年8月3日，CNNIC發布了第38次《中國互聯網絡發展統計報告》。根據報告，截止到2016年6月，我國網民規模達到7.10億，手機上網人數達到6.56億。網民中使用手機上網的人群占比達到92.5%，比2015年底提升2.4%，僅通過手機上網的網民占比達到24.5%，網民上網設備進一步向移動端集中。由此可見，手機等移動終端已經成為訪問網站的主要工具。

然而，現在很多的網站仍然是基于PC端開發的傳統網站，或者采用PC站點+移動站點的方式，這樣或造成用戶體驗差，或造成開發成本和維護成本高，都不是最好的方法。

2 幾種主要類型網站分析

2.1 傳統PC網站

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

2.2 手機網站

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

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

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

2.3 響應式網站

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

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

3 關鍵技術分析

3.1 媒介查詢

媒介查詢（Media Query）是CSS3的新增功能，允許根據訪問設備的條件定制樣式表規則。具體來說，就是可以根據訪問端的介質情況和屏幕分辨率，調用不同的樣式來渲染頁面效果。通過響應式設計，可以實現跨平臺和跨設備的兼容。

可以通過兩種不同的方式使用媒體查詢：

3.1.1 在頁面頭部鏈接外部CSS

在中使用標簽時，通過設置media屬性，實現對設備的判斷，從而加載不同的CSS文件，例如：

這句代碼表示在滿足 media 的判斷語句 screen and （min-width： 400px）時調用middle.css文件，即在寬度大于等于400像素的屏幕設備上面使用該樣式表。

3.1.2 在CSS中為不同設備定制樣式

@media screen and （min-width： 600px） { /* CSS Code */ }

@media screen and （max-width： 599px） { /* CSS Code */ }

上面兩行代碼中，第一行代碼表示在滿足最小寬度為600像素的屏幕設備中調用樣式，第二行代碼表示在最大寬度為599像素的屏幕設備中執行的樣式。寫在 @media 語句段外的是公用代碼。如果出現樣式沖突，會按照原本的CSS規則調用樣式。

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

3.2 彈性盒布局

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

彈性盒布局原理如圖1所示。

在彈性盒布局中，一個元素上有主軸和縱軸，主軸默認是橫向的，縱軸是豎向的。其中，所有子元素的排版都會受這兩個軸的影響。通過改變主軸和縱軸的方向，可以設置很多相關CSS屬性，從而實現不同的設計效果。

3.3 圖片液態化

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

3.3.1 內容圖片

對內容圖片，可以使用max-width屬性設置其最大寬度值，以保證圖片的大小不會超出它所在的父容器大小。例如：

img{ max-width：100%； height：auto；}

這樣調整后，圖片的寬度不會超出其父元素的有效寬度。當其父元素變窄時，圖片的最大寬度值也相應減小，當其父元素變寬時，圖片的最大寬度值也隨之增加。圖片不會因為其容器的大小而被隱藏和遮蓋。通過設置height屬性的值為auto，保證了在圖片寬度變化時，整張圖片是等比例縮放的。

3.3.2 背景圖片

在CSS3中新增了對背景圖進行大小控制的屬性：background-size。background-size屬性包含兩個屬性值，分別表示背景圖的寬度和高度。要實現背景圖的“液態化”只需將寬度值設為100%，高度值設為auto，例如：

.bg{background：url（images/bg.jpg） no-repeat； background-size：100% auto；}

4 具體實現

將傳統網站重構為響應式網站時，要保證原有網站在PC端瀏覽的效果不變，同時要適配不同的移動設備。這就要求對原有網站進行分析，不破壞原有網站的HTML結構，只是通過新建CSS來滿足移動設備的瀏覽。此處以一個傳統的個人博客網頁為例，詳細說明重構的方法和過程。已有的個人博客網頁在PC上瀏覽的效果如圖2所示。

4.1 分析網站、取舍內容

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

4.2 編寫響應式網站樣式表

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

4.2.1 隱藏不顯示的內容

對不顯示的內容可以通過設置display屬性值為“none”實現。在個人博客頁面中右側邊欄內容放在一個調用了類“main_slide”的div里，設置如下：

.main_slide{ display：none；}

對不需要的背景圖，可以通過設置background屬性值為“none”實現。

4.2.2 自適應設置

在設置自適應時，要考慮容器大小、圖片大小和文字大小的自適應，還要考慮排版布局的自適應。

首先將各容器大小和圖片大小設置為百分比。個人博客頁面中的container容器和header容器均為全屏顯示，可以設置為：

.container{ width：100%； }

.header{ width：100%； }

對于排在一行的不同容器，要適當分配比例，例如：

.left{ width：30%；}

.right{width：70%；}

對于圖片可以設置其寬度值為百分比，高度值為自動，這樣可以實現圖片的等比例縮放。例如： img{max-width：80%； height：auto；}，這樣設置后圖片的寬度為其父容器的80%，高度根據圖片寬度的變化，等比例縮放。

字體大小的自適應實現，可以通過CSS3中的rem來設置。rem指根元素字體大小，一般為16px，在設置頁面中元素字體大小時只需根據16px的比例來設置就可以了，比如：.fnt{font-size：87.5%；}即設置14px大小的字體（14/16=0.875）。

4.3 為頁面應用樣式

通過CSS3的媒體查詢設置，可以根據具體設備情況，為網頁加載不同的CSS樣式表，以實現在不同設備上的相同瀏覽體驗。在個人博客網頁中具體設置方法如下：

在所有設備上頁面都會加載一個基本樣式表文件（basic.css），各種設備中顯示是一樣。當屏幕最小寬度為800px時，加載pc.css樣式表文件，用于呈現PC端的渲染風格。當屏幕寬度小于799px時，加載mobile.css文件，用于呈現移動端的渲染風格。

5 測試

在PC端使用IE瀏覽器、谷歌瀏覽器和火狐瀏覽器打開網頁，并改變窗口大小，網頁中的圖片、文字、背景及其他網頁元素均能正常顯示，并能保持良好的布局。

在平板電腦和手機上打開網頁，網頁中各元素均能正常顯示，并保持良好布局。

測試結果表明，重構后的頁面，具有很好的適配性。

6 結語

隨著手機用戶的不斷增加和使用習慣的轉變，響應式網站的開發顯得越來越重要，也受到了開發者和客戶的青睞。幫助傳統網站在幾乎不增加成本的前提下快速建立起自己的響應式網站，具有實際意義。

參考文獻

[1]中國互聯網絡信息中心（CNNIC）.第38次中國互聯網絡發展狀況統計報告[R].2016.

[2]曾祥利，柴煒嘉.響應式布局中柵格系統和彈性盒子的比較[J].產業與科技論壇，2015，14（20）：62-64.

[3]成富.深入理解CSS3彈性盒布局模型[OL].（2014-09-04）[2016-03-30].http：//www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/

[4]藏進進，鄂海紅.基于響應式Web設計的網頁生成系統研究與實現[J].軟件，2015，36（06）：37-41.