響應式網頁設計的研究

張欣輝

摘 要

本文闡述響應式網頁設計的關鍵步驟和技術。分別從媒體查詢、彈性圖片、流式布局對響應式web進行探討。

【關鍵詞】響應式 CSS3 媒體查詢 流式布局

響應式網頁設計（RWD）這個術語是2010年伊桑·馬克特（Ethan Marcotte）提出的[1]。他將三種已有的開發技巧整合起來，并命名為響應式網頁設計。這三種開發技巧分別為彈性網格布局、彈性圖片、媒體查詢。真正的響應式設計方法不僅僅只是根據視口改變網頁布局，相反它還從整體上顛覆了我們當前設計網頁的方法。以往我們是先針對桌面電腦進行固定寬度設計，然后將其縮小并且針對小屏幕進行內容整排；現在我們應該先針對小屏幕進行設計，然后逐步針對大屏幕的設計內容。

1 設計響應式網頁的步驟

1.1 通過產品策劃構思確定信息框架

參與產品策劃構思，通過對用戶行為的研究確定信息框架。明確產品的層級、功能點、最想展現的頁面。分析頁面類型把頁面歸類，例如操作頁面、詳情頁面、列表頁面等。

1.2 移動框架

顛覆了之前網頁設計的方法，以往我們是針對PC進行固定寬度設計，然后將其縮小并且針對小屏幕進行內容整排；現在我們應該先針對小屏幕進行設計，再制作PC端的設計。移動端設計的優先級比較高，其原因如下：

（1）移動設備屏幕比較小，能夠讓設計師找到優先級最高的模塊展示給用戶。同事手機以觸屏居多，它的手勢、交互動作也較PC端豐富了很多，對操作要求更高；此外手機使用場景更加豐富，很多場景用戶是缺乏耐心的。

（2）現在的智能移動設都都具有許多特性，如GPRS定位、語音輸入、指紋識別、人言識別技術、重力傳感器、光線傳感器、加速度傳感器等等，智能移動設備的可能性更加豐富。

設計手機端“超細長頁面”的框架。設計移動端細長關鍵是：把關鍵頁面，包括首頁、詳情頁面等，這些在功能和布局上具有獨特性代表性的網頁，展現給用戶。設計細長網頁的時候要注意用戶在小屏幕上的操作和閱讀習慣。

1.3 響應式模塊設計

由于事先規范出2-3個固定寬度做為響應的寬度。寬度最窄的即為手機端框架。再依次擴展出剩下兩個寬度的頁面設計。這一步可以讓這些頁面有條理地布局，用戶在瀏覽時有流暢的體驗。首先制定模塊響應變化的方式，即網頁從小屏幕到大屏幕，模塊如何變化，布局如何展現，是否需要根據內容再重新排布等等。下一步工作就是繼續細化規則，把框架精確到具體尺寸，即制定流體柵格系統。

1.4 細節設計

細節設計即在內容排版和交互效果方面加以豐富。根據前面制定的方案，打造合適的UI元素和控件。交互方式主要是展開、收起、模塊移動的效果。這一部分可以根據產品的內容進行策略調整，細節部分先設計PC端。因為PC端能明顯展現產品的復雜度，無論是設計、開發還是測試人員對于PC的工具和流程都較為熟悉，從PC開始設計細節可以更流暢。

1.5 響應式模塊設計、開發、提測

根據設計稿進行切圖，前端開發人員進行前端構建，然后在真實設備下測試頁面的效果，整個團隊討論并進行優化。

2 響應式網頁開發的關鍵技術

2.1 媒體查詢（media-query）

響應式的關鍵就是媒體查詢，它會自動探測屏幕寬度，然后加載相應的CSS文件。

上面代碼的意思是如果屏幕寬度小于400px就加載tinyscreen.css文件。除了用HTML標簽加載CSS文件，還可以在現有的CSS文件中加載。@import url（“tinyscreen.css”）screen and （max-device-width：400px）；

同一個CSS文件中也可以根據不同的屏幕分辨率，選擇不同的CSS規則。

@media screen and （max-device-width：400px）{.column{float：none； width：auto；} #sidebar{display：none；}}它的意思是如果屏幕寬度小于400px，則column塊取消浮動、寬度自動調節，sidebar不顯示。

2.2 流式布局

各個區域的位置都是浮動的，不是固定不變的。Float的好處就是如果寬度太小，放不下兩個元素，后面的元素會自動滾到前面元素的下方，而不會水平方向上溢出，避免了水平滾動條的出現。另外，絕對定位的使用也要非常的小心。網頁僅通過媒體查詢來劃分窗口寬度范圍，會從一組查詢規則突變至另一組，中間沒有經過平滑的漸變，而且會導致規則寬度范圍之外的頁面需要水平滾動才能完整瀏覽，具有一定的局限性- 為了解決這個問題，我們需要使用由百分比定義網頁內容寬度并設置 CSS浮動屬性的流式布局。

2.3 彈性圖片

響應式網頁還必須實現圖片的自動縮放。只要一行CSS代碼：img，objective{max-width：100%；}這行代碼對嵌入網頁的視頻也有效。若img{max-width：60%}，圖片就會自動按照容器60%的比例進行放縮。

3 結束語

面對不斷發展的瀏覽器和上網設備，尋找一種可行的解決方案。采用HTML5和CSS3的響應式網頁設計，可以兼容多種設備和屏幕。響應式是一種設計理念和前端技術緊密結合的新興的網頁形態，它體現了團隊跨職能來溝通協作。不需要服務器端，結合HTML、CSS、jQuery等網頁開發技術就能達到良好的用戶體驗。移動設備正在迅猛增長，即將超越PC，成為最主流的上網方式，這個趨勢是不可逆的。響應式網頁設計也將展現出它優良的設計效果和用戶體驗，來迎接未來的移動世界。

參考文獻

[1]Ethan Marcotte.Responsive Web Design[M].3.

[2]FrainB.Responsive Web Design with HTML5 and CSS3[M].Birmingham：Packet Publishing，2012：3.

作者單位

北京航空航天大學軟件學院 北京市 100028endprint