張聰聰

（中南民族大學(xué) 美術(shù)學(xué)院，湖北 武漢 430074）

淺析響應(yīng)式網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)與優(yōu)化

張聰聰

（中南民族大學(xué) 美術(shù)學(xué)院，湖北 武漢 430074）

伴隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁設(shè)計(jì)也呈現(xiàn)出翻天覆地的變化，設(shè)計(jì)師們需要摸索一些新的技巧和方法來優(yōu)化網(wǎng)頁設(shè)計(jì)。伊?！ゑR科特提出的響應(yīng)式網(wǎng)頁設(shè)計(jì)將我們帶入了一個(gè)全新的設(shè)計(jì)領(lǐng)域，在CSS與HTML5的理論實(shí)踐基礎(chǔ)上，與用戶的藝術(shù)審美需求相融合，使得響應(yīng)式網(wǎng)頁設(shè)計(jì)脫穎而出。

網(wǎng)頁設(shè)計(jì)；響應(yīng)式；媒體查詢

互聯(lián)網(wǎng)時(shí)代的到來對網(wǎng)頁的要求也越來越高，為每一種分辨率和新設(shè)備創(chuàng)建一個(gè)網(wǎng)頁版本是不切實(shí)際的，如何解決這些問題呢？2010年伊?！ゑR科特（Ethan Marcotte）創(chuàng)造性地提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)（Response Web Design）以此來解決這些難題，《響應(yīng)式網(wǎng)頁設(shè)計(jì)》將流動布局、彈性圖片和CSS媒體查詢?nèi)呓Y(jié)合構(gòu)成響應(yīng)式網(wǎng)頁。

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

在響應(yīng)式網(wǎng)頁出現(xiàn)以前，以固定寬度為主的頁面布局使大多數(shù)網(wǎng)站存在一些問題。響應(yīng)式網(wǎng)頁設(shè)計(jì)的優(yōu)化體現(xiàn)在以下幾個(gè)方面：

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

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

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

在了解響應(yīng)式的同時(shí)，我們就會提出如何實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)：

首先，在丹·錫德霍姆（Dan Cederholm）編寫的《無懈可擊的Web設(shè)計(jì)》一書中，伊?！ゑR科特為其撰寫了一章關(guān)于流動布局的內(nèi)容。在書中，他提出了一個(gè)標(biāo)準(zhǔn)化的公式，即“目標(biāo)元素寬度÷上下文元素寬度=百分比寬度”。

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

再次，是彈性圖片的應(yīng)用。使用CSS的max-width進(jìn)行簡單的修復(fù)，該方法在伊?！ゑR科特關(guān)于流動的圖片的文章中提到過。

隨著移動無線網(wǎng)絡(luò)數(shù)據(jù)的提速，移動設(shè)備已成為人們上網(wǎng)的主要方式，不斷推出的移動產(chǎn)品改變了用戶使用小屏幕設(shè)備上網(wǎng)的習(xí)慣，這些設(shè)備上的瀏覽器在設(shè)計(jì)時(shí)會考慮到如何顯示現(xiàn)有網(wǎng)頁。手機(jī)瀏覽器會將一個(gè)標(biāo)準(zhǔn)網(wǎng)頁縮小到最小視口，然后用戶在自己感興趣的內(nèi)容區(qū)域上放大瀏覽。這樣看起來已經(jīng)很好，但是作為前端設(shè)計(jì)師為什么還要在這上面繼續(xù)優(yōu)化呢？

首先，網(wǎng)站可以更少進(jìn)行維護(hù)。一個(gè)響應(yīng)式網(wǎng)站的維護(hù)成本較低，在所有類型的設(shè)備上只需要一個(gè)網(wǎng)站工作便可，這已經(jīng)在很大程度上減少了網(wǎng)站開發(fā)的工作量。而開發(fā)一個(gè)獨(dú)立的移動網(wǎng)站，實(shí)際上是擁有了兩個(gè)獨(dú)立網(wǎng)站，那么就需要兩個(gè)網(wǎng)站的維護(hù)量，也有可能造成網(wǎng)站數(shù)據(jù)的不同步。

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

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

［1］卡德萊茨（Tim Kadlec）.響應(yīng)式W eb設(shè)計(jì)實(shí)踐［M］.侯鴻儒 譯.北京：人民郵電出版社，2013.

［2］Ben Frain.響應(yīng)式W eb設(shè)計(jì):HTM L5和CSS3實(shí)戰(zhàn)［M］.王永強(qiáng) 譯.北京：人民郵電出版社，2013.

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

張聰聰，女，漢族，中南民族大學(xué)美術(shù)學(xué)院，設(shè)計(jì)藝術(shù)學(xué)2012級研究生。

TB472

A

1007-0125（2015）03-0166-01