響應式網頁設計初探

【摘 要】無線網絡技術的發展和移動設備的普及為人們的生活帶來了便利，越來越多的用戶選擇通過智能手機、平板電腦等移動終端訪問互聯網。如何使網頁能夠在不同屏幕分辨率下完美地呈現？筆者對響應式網頁設計中媒體查詢、流式布局、彈性圖片、彈性文本等方面進行了分析。

【關鍵詞】網頁設計 響應式設計 自適應

【中圖分類號】TP393.0 【文獻標識碼】A 【文章編號】1674-4810（2015）25-0135-02

一 引言

伴隨著無線網絡技術的快速發展，智能手機和平板電腦越來越受到人們的青睞，各種尺寸的設備也是層出不窮。人們希望在享受移動終端便利的同時，能夠擁有與桌面終端同樣美好的視覺體驗。然而，同樣內容的網頁要在不同分辨率的顯示器上呈現出滿意的效果并不是一件容易的事。很多網站的解決辦法是，為不同尺寸的設備制作不同版本的網站，如專門提供手機版網站，以保證網頁在移動終端設備上的顯示效果。事實上，這一做法不僅增加了網站架構設計的復雜度，增加了網站的維護成本，而且手機版網站也并不能夠保證在所有的移動終端上都能夠正常顯示。為了讓網站的頁面最大限度地適應各種性能與規格的終端設備，響應式網頁設計誕生了。

二 響應式網頁設計概述

響應式網頁設計（RWD，Responsive Web Design）又稱為自適應網頁設計，是伊桑·馬克特（Ethan Marcotte）于2010年提出的。伊桑·馬克特在A List Apart發表了一篇名為“Responsive Web Design”的開創性文章，文章將建筑學的響應式架構思想延伸到網頁開發領域，認為物理空間可以根據人的情況而進行不斷的響應，從而可以得到一個全新的設計技術，使得Web網頁設計同樣可以根據不同的設備終端進行自動響應和調整。伊桑·馬克特將媒體查詢（Media Queries）、流式布局（Fluid Grids）、彈性圖片（Fluid Image）三種開發技巧結合起來命名為響應式網頁設計。響應式網頁設計可以適應多種不同設備的屏幕尺寸和分辨率，并做出相應的調整和布局。

響應式網頁設計是一種以用戶為中心的設計模式，它的實質是根據多樣化的瀏覽設備來對頁面內容進行完美布局的一種顯示機制。響應式網頁設計可以讓網頁自動適應不同尺寸、不同分辨率的屏幕，并根據屏幕寬度自動調整布局，它可以為不同終端的用戶提供更加流暢和靈活的界面從而實現更舒適的用戶體驗，是一種面向未來的可靠的網頁設計解決方案。

三 響應式網頁設計的核心技術

1.媒體查詢

媒體查詢，它是響應式網頁設計的核心，由媒體類型和檢測媒體特性的條件表達式組成，用于設置某種媒體特性下的顯示規則。它會自動檢測不同的媒體或同一媒體的不同條件，然后加載相應的CSS文件。網頁開發人員只需要根據不同顯示器分辨率來編寫不同的頁面布局樣式，然后上網設備會根據自身的屏幕分辨率來選擇其適合的頁面布局，從而達到改善用戶瀏覽體驗的目的。

媒體特性的種類很多，但響應式設計的媒體查詢檢測的屬性主要包括：屏幕寬高比例、視口（顯示區域）的寬高、屏幕方向（即設備處于垂直或水平的狀態）等功能特性。這些屬性通過“與或非”等邏輯運算符形成相應的表達式，用來判斷是否為特定的目標設備類型，從而加載特殊樣式、調整頁面布局。

一般來講，媒體查詢順序采用移動優先設計，遵循漸進增強原則，而非早期網站設計提倡的優雅降級原則。優先建立移動設備用戶體驗，確保移動用戶能夠訪問所有基本內容，滿足簡潔、順暢的情境需求，然后針對更高的分辨率進行調整，創造更豐富的體驗。即，在樣式表的開頭定義基本樣式，然后使用媒體查詢從低分辨率到高分辨率來重寫樣式，以覆蓋前面定義的樣式，來漸進地改善在平板電腦和桌面電腦上呈現的質量。這種設計可以保持對最重要特性的關注，使得不同設備上的統一體驗得以實現，也可以降低CSS代碼的復雜性，減少冗余代碼。

2.流式布局

僅靠媒體查詢是不能很好地實現頁面的響應式設計的，網頁本身的布局結構也會影響響應式頁面設計的顯示效果。傳統的網頁布局方法是固定布局方法，即以像素為單位來固定網頁的寬度。這種布局方式由于最外層的容器寬度是固定不變的，所以不論訪問者的瀏覽器分辨率是多少，他們所看到的網頁寬度都是相同的。當屏幕較大時，頁面兩側會出現大片的空白區域；當屏幕較小時，頁面內容不能完全顯示，用戶只能不斷地通過拖動水平滾動條或手指滑動來進行瀏覽。

流式布局主要使用百分比來設置網頁各部分的寬度，結合CSS中的元素浮動屬性，可以讓網頁中的元素根據視口變化自動調整自身寬度及位置，以適應不同的屏幕分辨率。流式布局網頁中各個容器的位置都是浮動的，當視口寬度小于頁面中某個元素時，該元素會自動浮動到上面元素的下方顯示，而不會在水平方向上溢出，這樣就避免了水平滾動條的出現。

如果已經擁有了一個固定像素布局的網頁，那么將固定像素寬度轉換成百分比寬度可以這樣計算，即百分比寬度等于目標元素寬度除以上下文元素寬度。因此，只要明確了上下文元素，就可以很方便地將固定像素寬度轉換為對應的百分比寬度，以便實現百分比布局。

此外，在傳統網站中，頁面元素的大小都精確為某個絕對尺寸。然而，在響應式設計中，為了配合流式布局，需要對頁面元素使用相對尺寸，即使用百分比設置，這樣能夠使網頁能更好地適應各種屏幕。

3.彈性圖片

響應式網頁設計除了頁面結構可以自適應縮放外，圖片也要能相應地實現大小隨窗口尺寸自適應變化。一般情況下，網頁上的圖像都會以原始寬度進行加載，當包含某個元素的視口寬度小于圖像的原始寬度時，圖像的某些部分會被遮擋或隱藏。當分辨率發生變化時，如何實現圖片的輕松縮放呢？彈性圖片設計的本質是確保圖片適應頁面版式布局的變化，確保圖片的可讀性。它使得圖片在響應分辨率變化的同時，能夠不失真地進行縮放或裁剪，以提供友好的顯示。彈性圖片設計最常用的方法是使用CSS的max-width屬性，代碼為：img{max-width：100%；}。max-width：100%的意思是如果指定圖片的寬度不超過父級元素的寬度，則大小不變，如果超過了父級元素的寬度，則將寬度收縮為父級元素的寬度。這樣就可以確保圖像在其包含元素的可視寬度下以最大的寬度同比完整地顯示，當圖像所在的包含元素寬度變大或變小時，圖像也會隨之變大或變小，實現自由縮放。當然，如果將代碼改為：img，video，object{max-width：100%；}，則對視頻等其他的嵌套媒體同樣有效。

4.彈性文本

網站開發者常用像素（px）來精確控制文本大小，但是不同的屏幕具有不同的分辨率，這可能會造成文字在某些設備上看起來太大或太小。響應式網頁設計中，頁面上顯示的文本大小單位采用了“em”，它是一種相對長度單位，是相對于當前對象內文本尺寸而言的。“em”可以實現跨瀏覽器縮放，具有更好的靈活性和可訪問性。如果給標簽中的文本設置font-size屬性值后，其他文字都使用相對單位“em”，那么這些文字都會受到標簽中文本設置的影響，調整默認基準或倍數，其余的文本就會自動按比例進行縮放，從而為網頁的設計、開發和維護帶來很多便利。將文字的固定尺寸轉換為相對尺寸的計算方法與百分比布局的計算方法相同，即，百分比尺寸等于目標元素尺寸除以上下文元素尺寸。

四 結束語

隨著無線網絡技術的發展，移動設備正在迅猛增長并即將成為最主流的上網終端。越來越多的網站將會采用響應式設計方式，由以桌面電腦為中心的設計思想逐漸轉化為為未知設備而設計的思想。響應式網頁設計從媒體查詢、流式布局、彈性圖片開始，但它的發展還遠不止于此，仍然在不斷變化，不斷創新。“讓用戶忘記設備的尺寸”的理念將更快地驅動響應式設計不斷向前，使其展現出更加優良的設計效果和用戶體驗并成為網頁設計的趨勢。

參考文獻

[1]邢希、田興彥、王世運.響應式Web設計方法的研究[J].瓊州學院學報，2013（2）：36～38

[2]王愉、潘明明.響應式網頁設計初探[J].北京印刷學院學報，2014（3）：13～15

[3]張欣輝.響應式網頁設計的研究[J].電子技術與軟件工程，2014（18）：57

[4]游琪.響應式網頁設計在移動互聯網中的應用[J].計算機光盤軟件與應用，2014（14）：293～294

[5]林瀛瀛.響應式設計技術在視頻網站開發中的應用[D].東華大學，2014：2～3

〔責任編輯：林勁〕