響應(yīng)式Web設(shè)計(jì)在移動(dòng)終端的實(shí)踐探索

郭飛軍

(浙江國際海運(yùn)職業(yè)技術(shù)學(xué)院，浙江 舟山 316021)

0 引言

我國移動(dòng)互聯(lián)網(wǎng)市場(chǎng)快速擴(kuò)展，移動(dòng)互聯(lián)網(wǎng)設(shè)備不斷更新，在這樣的環(huán)境下，移動(dòng)互聯(lián)網(wǎng)的網(wǎng)站設(shè)計(jì)必須緊跟移動(dòng)設(shè)備的硬件技術(shù)水平，完善網(wǎng)站與移動(dòng)終端的貼合度。于是，如何將網(wǎng)站在不同的設(shè)備上展示給用戶就是需要思考的問題。在理想狀態(tài)下Web設(shè)計(jì)可以根據(jù)用戶的不同需求以及顯示屏幕的不同分辨率展示不同的版本，為用戶提供最佳的用戶瀏覽體驗(yàn)[1]。但是顯然，面對(duì)不斷更新的硬件設(shè)備，Web的設(shè)計(jì)需要不斷的更新，無疑會(huì)增加各項(xiàng)工作的成本。結(jié)合現(xiàn)有的技術(shù)，采取響應(yīng)式Web設(shè)計(jì)可以很好地應(yīng)對(duì)這一問題。在Web頁面的設(shè)計(jì)和開發(fā)中，針對(duì)不同客戶的需求，在命令網(wǎng)站針對(duì)移動(dòng)終端設(shè)備上的硬件性能對(duì)自身的布局進(jìn)行設(shè)計(jì)，通過這樣的方式，移動(dòng)終端可以得到最佳的Web展示。在響應(yīng)式網(wǎng)頁的設(shè)計(jì)中，主要涉及整合媒體查詢、彈性視覺媒體和流動(dòng)布局，通過以上的技術(shù)支持可以很好的解決不同終端設(shè)備的適應(yīng)性問題。

1 移動(dòng)互聯(lián)網(wǎng)和智能移動(dòng)終端的發(fā)展現(xiàn)狀

在現(xiàn)階段的技術(shù)實(shí)力和市場(chǎng)需求的轉(zhuǎn)變中，在網(wǎng)頁設(shè)計(jì)領(lǐng)域正發(fā)生著不斷的變化，在過去的一段時(shí)間里，PC作為主要展示網(wǎng)絡(luò)頁面的設(shè)備，在網(wǎng)頁設(shè)計(jì)上可以主要考慮內(nèi)容的因素，設(shè)備種類相對(duì)較少，網(wǎng)頁設(shè)計(jì)過程中需要較少的設(shè)計(jì)方式。但隨著移動(dòng)互聯(lián)網(wǎng)終端的發(fā)展，多種尺寸的屏幕，不同大小的分辨率，適當(dāng)?shù)腤eb設(shè)計(jì)成為市場(chǎng)的需求。

設(shè)計(jì)人員根據(jù)設(shè)計(jì)的理論提出了響應(yīng)式Web的設(shè)計(jì)理念，設(shè)計(jì)的網(wǎng)頁可以根據(jù)終端設(shè)備的性能進(jìn)行適當(dāng)?shù)捻憫?yīng)和調(diào)整。向用戶提供友好的網(wǎng)頁體驗(yàn)。在開發(fā)過程中，響應(yīng)式Web設(shè)計(jì)的目標(biāo)在于網(wǎng)頁對(duì)設(shè)備的兼容性，而非網(wǎng)頁針對(duì)設(shè)備響應(yīng)出不同的版本。Web設(shè)計(jì)的目標(biāo)設(shè)備不僅包括手機(jī)終端，還可以兼容平板電腦，電視，PC顯示器，以及手機(jī)屏幕的縱向或橫向的使用。

2 響應(yīng)式Web設(shè)計(jì)流程

響應(yīng)式Web設(shè)計(jì)中一般要經(jīng)過以下的三個(gè)基本流程：首先，確定目標(biāo)設(shè)備的基本硬件組成情況，以及交互信息流需求的相關(guān)信息等。這些信息的獲取要通過市場(chǎng)調(diào)查和咨詢；再者，根據(jù)以上的信息對(duì)網(wǎng)頁作出線框模型，根據(jù)掌握的信息需求設(shè)計(jì)網(wǎng)頁的功能模塊；之后，要進(jìn)行UI效果設(shè)計(jì)，進(jìn)行交互功能的定義完善網(wǎng)頁的細(xì)節(jié)，結(jié)合理論進(jìn)行技術(shù)性的完善；最后通過前端編輯程序進(jìn)行規(guī)劃和設(shè)計(jì)。

3 響應(yīng)式Web實(shí)現(xiàn)的原理

響應(yīng)式Web設(shè)計(jì)的原理是，網(wǎng)頁的設(shè)計(jì)與開發(fā)中要根據(jù)客戶的行為和設(shè)備的硬件性能進(jìn)行相應(yīng)的響應(yīng)與調(diào)整。在實(shí)踐過程中存在多方面的結(jié)構(gòu)構(gòu)成，主要有彈性網(wǎng)格和布局、響應(yīng)式圖片、CSS3中媒體查詢屬性等。在使用中，無論用戶使用什么樣的設(shè)備，頁面可以針對(duì)設(shè)備的響應(yīng)獲得設(shè)備的硬件性能，包括分辨率大小，圖片適用尺寸以及相關(guān)的腳本功能等，在這樣的技術(shù)設(shè)計(jì)下，頁面可以主動(dòng)去響應(yīng)設(shè)備的基本性能[2]。通過網(wǎng)頁，以設(shè)備之間的響應(yīng)對(duì)網(wǎng)頁進(jìn)行調(diào)整，從而解決網(wǎng)頁與設(shè)備不匹配的問題。在響應(yīng)式Web設(shè)計(jì)中，理論上要求網(wǎng)頁根據(jù)設(shè)備的性能進(jìn)行調(diào)整，但是設(shè)計(jì)中并不能像機(jī)器設(shè)計(jì)中的傳感器的設(shè)置，響應(yīng)式Web設(shè)計(jì)中更注重思維上的設(shè)計(jì)?，F(xiàn)階段液態(tài)布局、幫助頁面重新格式化的media queries和腳本等技術(shù)已經(jīng)開始應(yīng)用。響應(yīng)式Web設(shè)計(jì)不但是一種物理的設(shè)計(jì)，更是一種是為形式的體現(xiàn)。

4 響應(yīng)式Web設(shè)計(jì)的關(guān)鍵

構(gòu)建響應(yīng)式Web的技術(shù)關(guān)鍵在于：HTML5技術(shù)、CSS3 Media Query技術(shù)。最主要的技術(shù)環(huán)節(jié)包括流體布局、流體圖片、媒體查詢。

4.1 HTML5與CSS3技術(shù)

HTML5是一個(gè)完整的技術(shù)組合，主要包括HTML、CSS和JavaScript，其特點(diǎn)在于可以強(qiáng)化Web網(wǎng)頁的表現(xiàn)性能，并且還擁有本地?cái)?shù)據(jù)庫等Web應(yīng)用功能，HTML5用于移動(dòng)應(yīng)用的開發(fā)中具有很好的效果，設(shè)計(jì)是可以創(chuàng)建更簡(jiǎn)潔的代碼參與金響應(yīng)式設(shè)計(jì)中。現(xiàn)階段HTML5已經(jīng)可以適應(yīng)大部分常用的瀏覽器。

HTML5的特性：設(shè)置了更多的描述性標(biāo)簽，頭部、尾部、導(dǎo)航區(qū)域、側(cè)邊欄等標(biāo)簽，對(duì)頁面進(jìn)行結(jié)構(gòu)化的描述；良好的多媒體支持；Web應(yīng)用方面提供了多種新功能，可以在技術(shù)上彌補(bǔ)對(duì)第三方的依賴；Web socket支持；跨文檔消息通信；客戶端儲(chǔ)存。

響應(yīng)式設(shè)計(jì)的主要方法是利用工具CSS3媒體查詢屬性，包括：設(shè)備屏幕的尺寸、設(shè)備屏幕的分辨率等。這些屬性可以通過邏輯運(yùn)算符構(gòu)成表達(dá)式，以此判斷目標(biāo)設(shè)備的硬件屬性，調(diào)整加載樣式和頁面布局，響應(yīng)出相應(yīng)的網(wǎng)頁展示[3]。響應(yīng)式設(shè)計(jì)的目標(biāo)在于有條件的應(yīng)用HTML和CSS實(shí)現(xiàn)網(wǎng)頁對(duì)多種設(shè)備的兼容能力，CSS3模塊的功用就在于媒體查詢，根據(jù)特定視口設(shè)置特定的CSS規(guī)則。CSS3中將原來龐大的模塊進(jìn)行劃分，呈現(xiàn)出諸多小的模塊，包括盒子模型、列表模型、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

4.2 流式布局

針對(duì)固定布局的缺點(diǎn)響應(yīng)式Web設(shè)計(jì)把固定的設(shè)定設(shè)置為相對(duì)的設(shè)定，主要有流體布局和彈性圖片。

4.2.1 流體布局

流體布局的設(shè)置是形成響應(yīng)式Web的基礎(chǔ)，響應(yīng)式Web設(shè)計(jì)采用彈性布局來滿足不同設(shè)備的硬件要求，將布局的尺寸設(shè)置為靈活的、可以變動(dòng)的形式，整個(gè)頁面的相對(duì)比例根據(jù)屏幕的大小進(jìn)行改變，整個(gè)頁面更加有彈性?？梢院芎玫募嫒莶煌O(shè)備的不同形式，流體布局的主要方式是調(diào)整百分比和設(shè)置字號(hào)（em）的比例。

常用的方法是調(diào)整百分比，在布局是尺寸命令用%而非像素的設(shè)置，這就可以是頁面相對(duì)于瀏覽器的窗口進(jìn)行伸縮，實(shí)現(xiàn)對(duì)屏幕的適應(yīng)。在設(shè)置容器尺寸時(shí)吧不可以跨越整個(gè)瀏覽器窗口，只是跨越窗口寬度的一定比例，保證尺寸在屏幕尺寸之內(nèi)并產(chǎn)生比較好的效果。也可以考慮用比例設(shè)置填充和空白邊框的設(shè)置，命令填充部分和空白邊的寬度隨窗口尺寸的變化不斷變化。設(shè)計(jì)一個(gè)三列的流體布局可以使用如下的代碼：

#warpper{width：85%；}

#mainNav{width：23%；float：right；}

#content{width：75%；float：right}

以上的代碼設(shè)置的主要功能是將窗口的寬度與瀏覽器的寬度固定在85%的比例，導(dǎo)航區(qū)域尺寸比例設(shè)置為23%，內(nèi)容區(qū)域尺寸比例設(shè)置75%，這樣的設(shè)置，即使顯示屏幕的分辨率和尺寸發(fā)生變化，那么網(wǎng)頁顯示區(qū)域始終與顯示器的比例不變，提升用戶的使用體驗(yàn)[4]。

還有一種方式是設(shè)置字號(hào)的比例（em），這種方式通過改變字號(hào)的大小來控制整個(gè)頁面的尺寸，這種方法就是以某一元素的尺寸為基準(zhǔn)字號(hào)，折算出em，這樣當(dāng)父窗口的字號(hào)基準(zhǔn)根據(jù)不同分辨率發(fā)生變化時(shí)，元素的尺寸也會(huì)產(chǎn)生相應(yīng)比例的縮放，實(shí)現(xiàn)響應(yīng)式的變動(dòng)。

4.2.2 彈性圖片

在現(xiàn)階段很多資料和實(shí)際應(yīng)用中，圖片的處理要考慮到設(shè)備的分辨率，保證圖片的保真率。設(shè)計(jì)上，往往不考慮其他因素對(duì)圖片的影響，僅僅注意到圖片根據(jù)不同分辨率的自適應(yīng)能力的變化，如果圖片在展示中出現(xiàn)被拉伸而失真的情況，可以考慮在不同的分辨率下展示不同的圖片。在Web設(shè)計(jì)中往往賦予圖片自適應(yīng)的能力，只要給圖片設(shè)置具體大小的尺寸，在樣式中設(shè)定圖片width：就可以100%實(shí)現(xiàn)圖片的自動(dòng)調(diào)整功能。

4.3 媒體查詢

流式布局在設(shè)計(jì)中可以提供響應(yīng)式的頁面布局，當(dāng)設(shè)定某種分辨率，僅僅在布局上的相應(yīng)是滿足不了頁面的需求的，還要在內(nèi)容上做取舍。在一定的尺寸下，如何將4行的內(nèi)容轉(zhuǎn)化為3行的內(nèi)容，調(diào)整自適應(yīng)顯示效果，調(diào)整顯示內(nèi)容。CSS3的媒體查詢可以對(duì)相關(guān)的問題提供解決方案。

設(shè)備屏幕的物理尺寸直接關(guān)系到響應(yīng)式Web設(shè)計(jì)的目標(biāo)，在移動(dòng)設(shè)備的使用中，布局視口的寬度，在保持其不變的情況下，瀏覽器會(huì)盡可能的放大可見視口，以方便在屏幕中顯示出完整的網(wǎng)頁[5]。大部分網(wǎng)頁在縮放中可以完美的顯示在手機(jī)屏幕上。

將屏幕尺寸與布局大小相統(tǒng)一，實(shí)現(xiàn)內(nèi)容與布局的自適應(yīng)。在HTML5的meta標(biāo)簽中，viewport屬性的主要作用及時(shí)充值移動(dòng)瀏覽器布局大小的默認(rèn)大小，控制頁面在展示時(shí)的縮放程度使Web頁面適應(yīng)移動(dòng)設(shè)備的屏幕的尺寸。使用mate標(biāo)簽寫入指定設(shè)備的視 口 寬 度 ＜metaname=“viewport”content=“width=device-width，initial-scale=1，user-scalable=0”/＞。 這個(gè)代碼的主要作用是自定時(shí)視口，制定視口寬度為設(shè)備寬度＜device-width＞，初始縮放比例大小為標(biāo)準(zhǔn)，不再進(jìn)行縮放，同時(shí)不允許用戶自定義縮放。

用@media規(guī)則進(jìn)行設(shè)計(jì)媒體查詢時(shí)候應(yīng)使用mediaqueries，可根據(jù)設(shè)定的窗口大小使用不同的CSS樣式。在不同的條件下選用CSS樣式或者CSS文件，在針對(duì)手機(jī)，平板等分辨率較低的設(shè)備選用其他的CSS，對(duì)網(wǎng)頁布局大小作調(diào)整，提升響應(yīng)式Web設(shè)計(jì)的兼容能力。

5 結(jié)束語

響應(yīng)式Web設(shè)計(jì)不只是某一方面的設(shè)計(jì)，其設(shè)計(jì)思想是保證頁面元素和布局具有相當(dāng)?shù)膹椥裕芗嫒莞鞣N性能條件下的硬件設(shè)備，并且增加網(wǎng)頁的展示效果和用戶的使用體驗(yàn)。未來根據(jù)技術(shù)的更新?lián)Q代，還需要更多的深入研究和設(shè)計(jì)。

參考文獻(xiàn)(References):

[1]陳寬飛,沈華英.支持移動(dòng)終端的響應(yīng)式Web設(shè)計(jì)與研究[J].無線互聯(lián)科技,2013.3:115-116

[2]宋亭燕,佟歐.響應(yīng)式Web設(shè)計(jì)技術(shù)實(shí)現(xiàn)方法研究[J].數(shù)字化用戶,2014.

[3]邢希,田興彥,王世運(yùn).響應(yīng)式Web設(shè)計(jì)方法的研究[J].瓊州學(xué)院學(xué)報(bào),2013.20(2):36-38

[4]臧進(jìn)進(jìn),鄂海紅.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁生成系統(tǒng)研究與實(shí)現(xiàn)[J].軟件,2015.6:37-41

[5]貝巖.響應(yīng)式Web設(shè)計(jì)實(shí)現(xiàn)方法研究[J].渤海大學(xué)學(xué)報(bào)(自然科學(xué)版),2014.2:22-23