郭飛軍

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

0 引言

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

1 移動互聯網和智能移動終端的發(fā)展現狀

在現階段的技術實力和市場需求的轉變中，在網頁設計領域正發(fā)生著不斷的變化，在過去的一段時間里，PC作為主要展示網絡頁面的設備，在網頁設計上可以主要考慮內容的因素，設備種類相對較少，網頁設計過程中需要較少的設計方式。但隨著移動互聯網終端的發(fā)展，多種尺寸的屏幕，不同大小的分辨率，適當的Web設計成為市場的需求。

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

2 響應式Web設計流程

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

3 響應式Web實現的原理

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

4 響應式Web設計的關鍵

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

4.1 HTML5與CSS3技術

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

HTML5的特性：設置了更多的描述性標簽，頭部、尾部、導航區(qū)域、側邊欄等標簽，對頁面進行結構化的描述；良好的多媒體支持；Web應用方面提供了多種新功能，可以在技術上彌補對第三方的依賴；Web socket支持；跨文檔消息通信；客戶端儲存。

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

4.2 流式布局

針對固定布局的缺點響應式Web設計把固定的設定設置為相對的設定，主要有流體布局和彈性圖片。

4.2.1 流體布局

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

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

#warpper{width：85%；}

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

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

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

還有一種方式是設置字號的比例（em），這種方式通過改變字號的大小來控制整個頁面的尺寸，這種方法就是以某一元素的尺寸為基準字號，折算出em，這樣當父窗口的字號基準根據不同分辨率發(fā)生變化時，元素的尺寸也會產生相應比例的縮放，實現響應式的變動。

4.2.2 彈性圖片

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

4.3 媒體查詢

流式布局在設計中可以提供響應式的頁面布局，當設定某種分辨率，僅僅在布局上的相應是滿足不了頁面的需求的，還要在內容上做取舍。在一定的尺寸下，如何將4行的內容轉化為3行的內容，調整自適應顯示效果，調整顯示內容。CSS3的媒體查詢可以對相關的問題提供解決方案。

設備屏幕的物理尺寸直接關系到響應式Web設計的目標，在移動設備的使用中，布局視口的寬度，在保持其不變的情況下，瀏覽器會盡可能的放大可見視口，以方便在屏幕中顯示出完整的網頁[5]。大部分網頁在縮放中可以完美的顯示在手機屏幕上。

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

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

5 結束語

響應式Web設計不只是某一方面的設計，其設計思想是保證頁面元素和布局具有相當的彈性，能兼容各種性能條件下的硬件設備，并且增加網頁的展示效果和用戶的使用體驗。未來根據技術的更新換代，還需要更多的深入研究和設計。

參考文獻(References):

[1]陳寬飛,沈華英.支持移動終端的響應式Web設計與研究[J].無線互聯科技,2013.3:115-116

[2]宋亭燕,佟歐.響應式Web設計技術實現方法研究[J].數字化用戶,2014.

[3]邢希,田興彥,王世運.響應式Web設計方法的研究[J].瓊州學院學報,2013.20(2):36-38

[4]臧進進,鄂海紅.基于響應式Web設計的網頁生成系統研究與實現[J].軟件,2015.6:37-41

[5]貝巖.響應式Web設計實現方法研究[J].渤海大學學報(自然科學版),2014.2:22-23