響應(yīng)式網(wǎng)頁設(shè)計初探

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

【關(guān)鍵詞】網(wǎng)頁設(shè)計 響應(yīng)式設(shè)計 自適應(yīng)

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

一 引言

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

二 響應(yīng)式網(wǎng)頁設(shè)計概述

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

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

三 響應(yīng)式網(wǎng)頁設(shè)計的核心技術(shù)

1.媒體查詢

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

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

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

2.流式布局

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

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

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

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

3.彈性圖片

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

4.彈性文本

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

四 結(jié)束語

隨著無線網(wǎng)絡(luò)技術(shù)的發(fā)展，移動設(shè)備正在迅猛增長并即將成為最主流的上網(wǎng)終端。越來越多的網(wǎng)站將會采用響應(yīng)式設(shè)計方式，由以桌面電腦為中心的設(shè)計思想逐漸轉(zhuǎn)化為為未知設(shè)備而設(shè)計的思想。響應(yīng)式網(wǎng)頁設(shè)計從媒體查詢、流式布局、彈性圖片開始，但它的發(fā)展還遠不止于此，仍然在不斷變化，不斷創(chuàng)新?！白層脩敉浽O(shè)備的尺寸”的理念將更快地驅(qū)動響應(yīng)式設(shè)計不斷向前，使其展現(xiàn)出更加優(yōu)良的設(shè)計效果和用戶體驗并成為網(wǎng)頁設(shè)計的趨勢。

參考文獻

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

[2]王愉、潘明明.響應(yīng)式網(wǎng)頁設(shè)計初探[J].北京印刷學(xué)院學(xué)報，2014（3）：13～15

[3]張欣輝.響應(yīng)式網(wǎng)頁設(shè)計的研究[J].電子技術(shù)與軟件工程，2014（18）：57

[4]游琪.響應(yīng)式網(wǎng)頁設(shè)計在移動互聯(lián)網(wǎng)中的應(yīng)用[J].計算機光盤軟件與應(yīng)用，2014（14）：293～294

[5]林瀛瀛.響應(yīng)式設(shè)計技術(shù)在視頻網(wǎng)站開發(fā)中的應(yīng)用[D].東華大學(xué)，2014：2～3

〔責(zé)任編輯：林勁〕