淺析響應式網頁設計的實現與優化

張聰聰

（中南民族大學 美術學院，湖北 武漢 430074）

淺析響應式網頁設計的實現與優化

張聰聰

（中南民族大學 美術學院，湖北 武漢 430074）

伴隨著互聯網的飛速發展，網頁設計也呈現出翻天覆地的變化，設計師們需要摸索一些新的技巧和方法來優化網頁設計。伊桑·馬科特提出的響應式網頁設計將我們帶入了一個全新的設計領域，在CSS與HTML5的理論實踐基礎上，與用戶的藝術審美需求相融合，使得響應式網頁設計脫穎而出。

網頁設計；響應式；媒體查詢

互聯網時代的到來對網頁的要求也越來越高，為每一種分辨率和新設備創建一個網頁版本是不切實際的，如何解決這些問題呢？2010年伊桑·馬科特（Ethan Marcotte）創造性地提出了響應式網頁設計（Response Web Design）以此來解決這些難題，《響應式網頁設計》將流動布局、彈性圖片和CSS媒體查詢三者結合構成響應式網頁。

那么什么是響應式網頁設計？響應式源于響應式建筑設計的概念，是指一個空間根據人的行為自動調整空間環境。響應式網頁設計根據用戶使用的設備環境，將一個網站在小屏幕手機與桌面電腦之間進行網頁界面的切換。即將流動布局、彈性圖片、CSS媒體查詢突破性地整合而成。其實質是網頁可以自動響應用戶設備，完美地呈現出相應的網頁布局。該設計和開發根據用戶的行為和環境進行響應，即根據屏幕的大小、設備平臺和使用方向來作出響應。

在響應式網頁出現以前，以固定寬度為主的頁面布局使大多數網站存在一些問題。響應式網頁設計的優化體現在以下幾個方面：

第一，不同終端設備的出現，如智能手機、平板電腦等設備存在屏幕尺寸不同的問題，且新的屏幕尺寸設備的不斷研發，在大小、功能甚至分辨率上都會發生變化。當用戶從便攜式電腦切換到ipad時，響應式網頁即刻切換到相應的分辨率、圖片尺寸和腳本。

第二，各種操作系統的出現，如Windows、Android、IOS等系統，它們之間相互兼容，解決跨瀏覽器的問題。響應式設計能夠根據用戶的瀏覽器版本，既保證老版本的可響應性，又為高分辨率顯示器提供相應的頁面內容，使用戶體驗得到最佳效果。

第三，桌面版瀏覽器滿足不同視口大小、旋轉方向的需求。現在許多用戶沒有最大化他們的瀏覽器，而屏幕本身有太多可調整的空間，如將瀏覽器視口調小，那么網站的布局就不能完整地呈現出來。隨著iPhone、ipad和智能手機的流行，許多新的設備能夠根據用戶的行為在豎屏和橫屏之間進行瞬間切換，響應式網頁能夠根據不同視口，為現有及將來的各種設備作出快速響應，呈現出完整的頁面布局。

在了解響應式的同時，我們就會提出如何實現響應式網頁設計：

首先，在丹·錫德霍姆（Dan Cederholm）編寫的《無懈可擊的Web設計》一書中，伊桑·馬科特為其撰寫了一章關于流動布局的內容。在書中，他提出了一個標準化的公式，即“目標元素寬度÷上下文元素寬度=百分比寬度”。

其次，CSS媒體查詢的使用，其中min-width和maxwidth這兩個屬性值的設定，可以調節網頁響應不同瀏覽設備的寬度范圍，可以在設備屏幕寬度高于這個值的情況下，為頁面指定一個特定的樣式表，利用CSS媒體查詢支持不同的視口大小匹配CSS樣式。

再次，是彈性圖片的應用。使用CSS的max-width進行簡單的修復，該方法在伊桑·馬科特關于流動的圖片的文章中提到過。

隨著移動無線網絡數據的提速，移動設備已成為人們上網的主要方式，不斷推出的移動產品改變了用戶使用小屏幕設備上網的習慣，這些設備上的瀏覽器在設計時會考慮到如何顯示現有網頁。手機瀏覽器會將一個標準網頁縮小到最小視口，然后用戶在自己感興趣的內容區域上放大瀏覽。這樣看起來已經很好，但是作為前端設計師為什么還要在這上面繼續優化呢？

首先，網站可以更少進行維護。一個響應式網站的維護成本較低，在所有類型的設備上只需要一個網站工作便可，這已經在很大程度上減少了網站開發的工作量。而開發一個獨立的移動網站，實際上是擁有了兩個獨立網站，那么就需要兩個網站的維護量，也有可能造成網站數據的不同步。

其次，不需要另外的域名。原本固定式的網頁需要建立桌面版和移動版兩個網站，而使用響應式網站則只需一個網站。

響應式網頁設計為我們打開了新思路，運用已有的流動布局、彈性圖片和媒體查詢技術其實并不新穎，而伊桑·馬科特將這三者結合應用到界面設計中是非常具有開創性的。我相信在多屏設備不斷發展的今天，響應式網頁代替固定式網頁設計已成為一個新趨勢。

［1］卡德萊茨（Tim Kadlec）.響應式W eb設計實踐［M］.侯鴻儒 譯.北京：人民郵電出版社，2013.

［2］Ben Frain.響應式W eb設計:HTM L5和CSS3實戰［M］.王永強 譯.北京：人民郵電出版社，2013.

［3］［德］Smashing M agazine.眾妙之門—精通CSS3［M］.李景媛，吳曉嘉 譯.北京：人民郵電出版社，2013.

張聰聰，女，漢族，中南民族大學美術學院，設計藝術學2012級研究生。

TB472

A

1007-0125（2015）03-0166-01