快速重構(gòu)傳統(tǒng)網(wǎng)站為響應(yīng)式網(wǎng)站的方法研究

徐文平

摘 要 隨著手機(jī)用戶的快速增長(zhǎng)，建立起自己的響應(yīng)式網(wǎng)站成了很多企業(yè)和個(gè)人的需求。然而對(duì)于一個(gè)已有的傳統(tǒng)網(wǎng)站，如果完全拋棄原有網(wǎng)站，重新建立一個(gè)新的響應(yīng)式網(wǎng)站，將造成成本的增加和資源的浪費(fèi)。本文探索一種將傳統(tǒng)網(wǎng)站快速重構(gòu)為響應(yīng)式網(wǎng)站的方法，在不改動(dòng)原有網(wǎng)站的基礎(chǔ)上，增加很少的工作量，就可以實(shí)現(xiàn)網(wǎng)站在移動(dòng)設(shè)備上的完全適配。

【關(guān)鍵詞】響應(yīng)式網(wǎng)站 傳統(tǒng)網(wǎng)站 重構(gòu)

1 引言

去年8月3日，CNNIC發(fā)布了第38次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展統(tǒng)計(jì)報(bào)告》。根據(jù)報(bào)告，截止到2016年6月，我國(guó)網(wǎng)民規(guī)模達(dá)到7.10億，手機(jī)上網(wǎng)人數(shù)達(dá)到6.56億。網(wǎng)民中使用手機(jī)上網(wǎng)的人群占比達(dá)到92.5%，比2015年底提升2.4%，僅通過(guò)手機(jī)上網(wǎng)的網(wǎng)民占比達(dá)到24.5%，網(wǎng)民上網(wǎng)設(shè)備進(jìn)一步向移動(dòng)端集中。由此可見，手機(jī)等移動(dòng)終端已經(jīng)成為訪問網(wǎng)站的主要工具。

然而，現(xiàn)在很多的網(wǎng)站仍然是基于PC端開發(fā)的傳統(tǒng)網(wǎng)站，或者采用PC站點(diǎn)+移動(dòng)站點(diǎn)的方式，這樣或造成用戶體驗(yàn)差，或造成開發(fā)成本和維護(hù)成本高，都不是最好的方法。

2 幾種主要類型網(wǎng)站分析

2.1 傳統(tǒng)PC網(wǎng)站

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

2.2 手機(jī)網(wǎng)站

手機(jī)網(wǎng)站主要是在各種移動(dòng)終端設(shè)備上瀏覽。由于各種終端設(shè)備本身的差異、設(shè)備使用環(huán)境的差異和上網(wǎng)速度的差異，使得手機(jī)網(wǎng)站的內(nèi)容必須簡(jiǎn)要，形式相對(duì)單一，必須能適配各種不同分辨率的終端設(shè)備，盡可能的考慮用戶體驗(yàn)。

基于移動(dòng)端開發(fā)的網(wǎng)站在瀏覽器設(shè)備和上網(wǎng)環(huán)境上受到了很大的局限，開發(fā)過(guò)程中更多的要考慮網(wǎng)站內(nèi)容的簡(jiǎn)約和用戶瀏覽的體驗(yàn)。

目前用的較多的微網(wǎng)站就是手機(jī)網(wǎng)站的一種形式。它是基于微信入口的手機(jī)網(wǎng)站，除具有手機(jī)網(wǎng)站的一般特點(diǎn)外，企業(yè)和個(gè)人還能借助微信用戶，更準(zhǔn)確的宣傳自己。微網(wǎng)站更加注重用戶的瀏覽體驗(yàn)和交互性能，具有便捷性，隱私性，互動(dòng)性，傳播力，關(guān)注力，成交率，轉(zhuǎn)化率，曝光率等特點(diǎn)。

2.3 響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站即自適應(yīng)網(wǎng)站，是由Ethan Marcotte在2010年5月提出的。簡(jiǎn)單的說(shuō)，就是“一站開發(fā)，隨處可用”，能兼容各種終端，不用考慮為不同的屏幕設(shè)備定做版本。近年來(lái)，各種大屏幕移動(dòng)設(shè)備的普及，響應(yīng)式網(wǎng)站也受到了更多人的青睞。乃至很多人認(rèn)為，響應(yīng)式網(wǎng)站是實(shí)現(xiàn)友好移動(dòng)目標(biāo)的最佳方案。

響應(yīng)式網(wǎng)站做到了“三站合一”，在網(wǎng)站開發(fā)和維護(hù)上大大降低成本，同時(shí)全方位宣傳自己。

3 關(guān)鍵技術(shù)分析

3.1 媒介查詢

媒介查詢（Media Query）是CSS3的新增功能，允許根據(jù)訪問設(shè)備的條件定制樣式表規(guī)則。具體來(lái)說(shuō)，就是可以根據(jù)訪問端的介質(zhì)情況和屏幕分辨率，調(diào)用不同的樣式來(lái)渲染頁(yè)面效果。通過(guò)響應(yīng)式設(shè)計(jì)，可以實(shí)現(xiàn)跨平臺(tái)和跨設(shè)備的兼容。

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

3.1.1 在頁(yè)面頭部鏈接外部CSS

在中使用標(biāo)簽時(shí)，通過(guò)設(shè)置media屬性，實(shí)現(xiàn)對(duì)設(shè)備的判斷，從而加載不同的CSS文件，例如：

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

3.1.2 在CSS中為不同設(shè)備定制樣式

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

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

上面兩行代碼中，第一行代碼表示在滿足最小寬度為600像素的屏幕設(shè)備中調(diào)用樣式，第二行代碼表示在最大寬度為599像素的屏幕設(shè)備中執(zhí)行的樣式。寫在 @media 語(yǔ)句段外的是公用代碼。如果出現(xiàn)樣式?jīng)_突，會(huì)按照原本的CSS規(guī)則調(diào)用樣式。

通過(guò)CSS中的媒介查詢功能，可以為不同的設(shè)備類型定義不同的CSS樣式，在通過(guò)瀏覽網(wǎng)頁(yè)時(shí)，自動(dòng)查詢媒體類型并調(diào)用對(duì)應(yīng)的樣式，以實(shí)現(xiàn)對(duì)不同設(shè)備的適配。

3.2 彈性盒布局

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

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

在彈性盒布局中，一個(gè)元素上有主軸和縱軸，主軸默認(rèn)是橫向的，縱軸是豎向的。其中，所有子元素的排版都會(huì)受這兩個(gè)軸的影響。通過(guò)改變主軸和縱軸的方向，可以設(shè)置很多相關(guān)CSS屬性，從而實(shí)現(xiàn)不同的設(shè)計(jì)效果。

3.3 圖片液態(tài)化

在響應(yīng)式布局中，圖片需要適配不同寬度的屏幕，以給出最佳顯示方案，如水一樣會(huì)跟著寬度的變化而變化。一個(gè)網(wǎng)頁(yè)中的圖片分為內(nèi)容圖片和背景圖片，可以分別對(duì)其進(jìn)行“液態(tài)化”設(shè)置。

3.3.1 內(nèi)容圖片

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

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

這樣調(diào)整后，圖片的寬度不會(huì)超出其父元素的有效寬度。當(dāng)其父元素變窄時(shí)，圖片的最大寬度值也相應(yīng)減小，當(dāng)其父元素變寬時(shí)，圖片的最大寬度值也隨之增加。圖片不會(huì)因?yàn)槠淙萜鞯拇笮《浑[藏和遮蓋。通過(guò)設(shè)置height屬性的值為auto，保證了在圖片寬度變化時(shí)，整張圖片是等比例縮放的。

3.3.2 背景圖片

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

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

4 具體實(shí)現(xiàn)

將傳統(tǒng)網(wǎng)站重構(gòu)為響應(yīng)式網(wǎng)站時(shí)，要保證原有網(wǎng)站在PC端瀏覽的效果不變，同時(shí)要適配不同的移動(dòng)設(shè)備。這就要求對(duì)原有網(wǎng)站進(jìn)行分析，不破壞原有網(wǎng)站的HTML結(jié)構(gòu)，只是通過(guò)新建CSS來(lái)滿足移動(dòng)設(shè)備的瀏覽。此處以一個(gè)傳統(tǒng)的個(gè)人博客網(wǎng)頁(yè)為例，詳細(xì)說(shuō)明重構(gòu)的方法和過(guò)程。已有的個(gè)人博客網(wǎng)頁(yè)在PC上瀏覽的效果如圖2所示。

4.1 分析網(wǎng)站、取舍內(nèi)容

由于移動(dòng)設(shè)備屏幕寬度及上網(wǎng)環(huán)境的限制，不可能將傳統(tǒng)網(wǎng)站中的內(nèi)容全部顯示。在取舍內(nèi)容時(shí)可以保留網(wǎng)站中最重要的部分，對(duì)可有可無(wú)的內(nèi)容要舍棄，對(duì)比較耗流量的背景圖要舍棄。手機(jī)網(wǎng)站中的每個(gè)頁(yè)面都是最應(yīng)該呈現(xiàn)給用戶的內(nèi)容，頁(yè)面簡(jiǎn)潔，無(wú)需過(guò)多的背景修飾。在個(gè)人博客網(wǎng)頁(yè)中將右側(cè)邊欄的內(nèi)容在手機(jī)端顯示時(shí)全部隱藏，如圖3所示。

4.2 編寫響應(yīng)式網(wǎng)站樣式表

在對(duì)內(nèi)容進(jìn)行取舍后，再針對(duì)移動(dòng)設(shè)備編寫響應(yīng)的樣式表文件。在樣式表文件中要對(duì)不顯示的內(nèi)容的進(jìn)行隱藏，對(duì)剩下內(nèi)容的顯示實(shí)現(xiàn)自適應(yīng)。

4.2.1 隱藏不顯示的內(nèi)容

對(duì)不顯示的內(nèi)容可以通過(guò)設(shè)置display屬性值為“none”實(shí)現(xiàn)。在個(gè)人博客頁(yè)面中右側(cè)邊欄內(nèi)容放在一個(gè)調(diào)用了類“main_slide”的div里，設(shè)置如下：

.main_slide{ display：none；}

對(duì)不需要的背景圖，可以通過(guò)設(shè)置background屬性值為“none”實(shí)現(xiàn)。

4.2.2 自適應(yīng)設(shè)置

在設(shè)置自適應(yīng)時(shí)，要考慮容器大小、圖片大小和文字大小的自適應(yīng)，還要考慮排版布局的自適應(yīng)。

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

.container{ width：100%； }

.header{ width：100%； }

對(duì)于排在一行的不同容器，要適當(dāng)分配比例，例如：

.left{ width：30%；}

.right{width：70%；}

對(duì)于圖片可以設(shè)置其寬度值為百分比，高度值為自動(dòng)，這樣可以實(shí)現(xiàn)圖片的等比例縮放。例如： img{max-width：80%； height：auto；}，這樣設(shè)置后圖片的寬度為其父容器的80%，高度根據(jù)圖片寬度的變化，等比例縮放。

字體大小的自適應(yīng)實(shí)現(xiàn)，可以通過(guò)CSS3中的rem來(lái)設(shè)置。rem指根元素字體大小，一般為16px，在設(shè)置頁(yè)面中元素字體大小時(shí)只需根據(jù)16px的比例來(lái)設(shè)置就可以了，比如：.fnt{font-size：87.5%；}即設(shè)置14px大小的字體（14/16=0.875）。

4.3 為頁(yè)面應(yīng)用樣式

通過(guò)CSS3的媒體查詢?cè)O(shè)置，可以根據(jù)具體設(shè)備情況，為網(wǎng)頁(yè)加載不同的CSS樣式表，以實(shí)現(xiàn)在不同設(shè)備上的相同瀏覽體驗(yàn)。在個(gè)人博客網(wǎng)頁(yè)中具體設(shè)置方法如下：

在所有設(shè)備上頁(yè)面都會(huì)加載一個(gè)基本樣式表文件（basic.css），各種設(shè)備中顯示是一樣。當(dāng)屏幕最小寬度為800px時(shí)，加載pc.css樣式表文件，用于呈現(xiàn)PC端的渲染風(fēng)格。當(dāng)屏幕寬度小于799px時(shí)，加載mobile.css文件，用于呈現(xiàn)移動(dòng)端的渲染風(fēng)格。

5 測(cè)試

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

在平板電腦和手機(jī)上打開網(wǎng)頁(yè)，網(wǎng)頁(yè)中各元素均能正常顯示，并保持良好布局。

測(cè)試結(jié)果表明，重構(gòu)后的頁(yè)面，具有很好的適配性。

6 結(jié)語(yǔ)

隨著手機(jī)用戶的不斷增加和使用習(xí)慣的轉(zhuǎn)變，響應(yīng)式網(wǎng)站的開發(fā)顯得越來(lái)越重要，也受到了開發(fā)者和客戶的青睞。幫助傳統(tǒng)網(wǎng)站在幾乎不增加成本的前提下快速建立起自己的響應(yīng)式網(wǎng)站，具有實(shí)際意義。

參考文獻(xiàn)

[1]中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）.第38次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R].2016.

[2]曾祥利，柴煒嘉.響應(yīng)式布局中柵格系統(tǒng)和彈性盒子的比較[J].產(chǎn)業(yè)與科技論壇，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]藏進(jìn)進(jìn)，鄂海紅.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)生成系統(tǒng)研究與實(shí)現(xiàn)[J].軟件，2015，36（06）：37-41.