田紅玉（黑龍江信息技術(shù)職業(yè)學(xué)院，黑龍江哈爾濱，150025）

?

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

田紅玉
（黑龍江信息技術(shù)職業(yè)學(xué)院，黑龍江哈爾濱，150025）

摘要：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠讓網(wǎng)頁(yè)的表現(xiàn)效果達(dá)到用戶(hù)的需求，越來(lái)越多的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)被廣泛的應(yīng)用。論文在闡述響應(yīng)式網(wǎng)頁(yè)概念的基礎(chǔ)上，分析了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)優(yōu)勢(shì)，給出了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵技術(shù)。

關(guān)鍵詞：響應(yīng)式設(shè)計(jì)；網(wǎng)頁(yè)開(kāi)發(fā)；Ethan Marcotte

1　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

近些年來(lái)，移動(dòng)智能設(shè)備發(fā)展迅猛，用戶(hù)們可以在各種終端上進(jìn)行訪(fǎng)問(wèn)，如：個(gè)人電腦、平板電腦、智能手機(jī)等各種途徑進(jìn)行訪(fǎng)問(wèn)。如何能使同一個(gè)網(wǎng)站在許多不同分辨率的屏幕和設(shè)備上都可以很好的顯示出來(lái)，不會(huì)出現(xiàn)排版的混亂。Ethan Marcotte 在2010年提出的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，解決了根據(jù)人的行為自動(dòng)調(diào)整空間環(huán)境這一難題。響應(yīng)式設(shè)計(jì)根據(jù)用戶(hù)不同的設(shè)備環(huán)境做出響應(yīng)，提出了一個(gè)空間應(yīng)該根據(jù)環(huán)境和存在其中的人的變化進(jìn)行響應(yīng)。頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)根據(jù)用戶(hù)的行為以及設(shè)備環(huán)境、屏幕尺寸等，能夠進(jìn)行自動(dòng)的響應(yīng)和相應(yīng)的調(diào)整，做到“一源多屏”。

2　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)

由于其便捷的功能，被越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)師們廣泛應(yīng)用，對(duì)比響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)概念沒(méi)有出現(xiàn)之前的固定寬度為主的頁(yè)面布局，有很多的特點(diǎn)及優(yōu)勢(shì)：

優(yōu)勢(shì)1，響應(yīng)式網(wǎng)頁(yè)可以很好地解決移動(dòng)終端設(shè)備顯示差異的問(wèn)題，當(dāng)用戶(hù)使用不同分辨率和屏幕大小的多種設(shè)備瀏覽響應(yīng)式網(wǎng)頁(yè)時(shí)，頁(yè)面會(huì)根據(jù)屏幕尺寸，分辨率來(lái)進(jìn)行重新的排版，能展現(xiàn)出更完美的顯示效果。通常情況下，網(wǎng)頁(yè)設(shè)計(jì)師想最想傳達(dá)的第一重要的內(nèi)容會(huì)第一個(gè)顯示出來(lái)，其余內(nèi)容會(huì)根據(jù)設(shè)計(jì)師其他的想法，以一種或幾種排序規(guī)則排列在屏幕外，用戶(hù)通過(guò)滑動(dòng)或滾動(dòng)屏幕就可以瀏覽其余信息。

優(yōu)勢(shì)2，在用戶(hù)使用平板電腦、智能手機(jī)等的時(shí)候，智能設(shè)備可以根據(jù)用戶(hù)的持握方向，主動(dòng)調(diào)整等用戶(hù)行為進(jìn)行橫屏豎屏切換。橫屏和豎屏的切換是發(fā)生在一瞬間的，而采用響應(yīng)式的網(wǎng)頁(yè)在這一瞬間也能根據(jù)不同的方向以及屏幕尺寸，做出迅速的響應(yīng)，使網(wǎng)頁(yè)呈現(xiàn)出最佳的布局效果。

優(yōu)勢(shì)3，采用響應(yīng)式開(kāi)發(fā)的頁(yè)面，可以減少維護(hù)成本，在目前人們生活中使用的的多種設(shè)備平臺(tái)上只需要一個(gè)網(wǎng)頁(yè)的開(kāi)發(fā)與維護(hù)。同時(shí)，在更新網(wǎng)站數(shù)據(jù)的時(shí)候也不會(huì)出現(xiàn)多個(gè)獨(dú)立平臺(tái)的網(wǎng)頁(yè)數(shù)據(jù)更新不同步的情況。響應(yīng)式網(wǎng)頁(yè)不同于多個(gè)獨(dú)立平臺(tái)的網(wǎng)頁(yè)，不會(huì)需要多個(gè)域名。

3　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵技術(shù)

響應(yīng)式網(wǎng)頁(yè)的實(shí)現(xiàn)包括三種主要技術(shù)：媒體查詢(xún)、液態(tài)圖片、液態(tài)網(wǎng)格布局。

3.1媒體查詢(xún)技術(shù)

具體來(lái)說(shuō)，就是可以根據(jù)用戶(hù)終端的介質(zhì)和屏幕大小，提供不同的樣式表或者只展示樣式表中的一部分，即根據(jù)設(shè)備的特點(diǎn)進(jìn)行辨別，由此確定使用不同的css樣式。在媒體查詢(xún)技術(shù)中，max-width與min-width兩個(gè)基本參數(shù)，加入?yún)?shù)后可以為網(wǎng)頁(yè)設(shè)定出一個(gè)寬度范圍，使網(wǎng)頁(yè)根據(jù)不同設(shè)備呈現(xiàn)出不同的瀏覽寬度。當(dāng)設(shè)備的屏幕寬度大于這個(gè)設(shè)定的值之后，網(wǎng)頁(yè)會(huì)使用指定好的CSS樣式。

如果一個(gè)網(wǎng)頁(yè)布局上有一個(gè)占比百分之二十五屏幕寬度的側(cè)邊欄，它在不同分辨率不同尺寸的屏幕上的顯示效果是不同的，它在比較大的電腦顯示器上是寬屏的，在屏幕比較小的智能

手機(jī)屏幕上卻是很狹窄的。而在分辨率最高或者最小的屏幕上，它可能就變成了一個(gè)非可用的組件。

3.2液態(tài)圖片技術(shù)

又被叫做彈性圖片，在不同尺寸的屏幕上圖片會(huì)進(jìn)行相對(duì)應(yīng)的反饋輸出，等比例的放大或縮小。不僅如此，在屏幕尺寸小、分辨率低的終端上，圖片還會(huì)降低自身的分辨率以適應(yīng)屏幕。網(wǎng)頁(yè)中的圖標(biāo)和按鈕等以扁平化的趨勢(shì)發(fā)展，扁平化設(shè)計(jì)風(fēng)格與模擬現(xiàn)實(shí)中真實(shí)對(duì)象的特性的擬物化正好相反，是一種二維化，取消一切立體陰影，浮雕與高光等等的修飾，十分簡(jiǎn)潔，能夠快速的傳達(dá)信息，很好的實(shí)現(xiàn)了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

3.3液態(tài)網(wǎng)格布局

將頁(yè)面內(nèi)容元素設(shè)置成屏幕所對(duì)應(yīng)的相對(duì)值。為了適應(yīng)不同的屏幕大小，響應(yīng)式網(wǎng)站往往應(yīng)用液態(tài)網(wǎng)格布局，網(wǎng)頁(yè)會(huì)根據(jù)屏幕的變化進(jìn)行重排做出適當(dāng)?shù)淖兓赃m應(yīng)屏幕大小以及分辨率等。此布局采用彈性化技術(shù)，可以在不同設(shè)備之間進(jìn)行變化，與此同時(shí)頁(yè)面的布局簡(jiǎn)潔明了，給用戶(hù)良好的視覺(jué)效果及體驗(yàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)為設(shè)計(jì)師們打開(kāi)了新的思路，Ethan Marcotte將媒體查詢(xún)、彈性圖片、液態(tài)網(wǎng)格布局技術(shù)結(jié)合應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中，為網(wǎng)頁(yè)開(kāi)發(fā)和維護(hù)帶來(lái)巨大的好處，幾乎適應(yīng)所有設(shè)備的屏幕，降低了網(wǎng)站的開(kāi)發(fā)與維護(hù)的工作量，為用戶(hù)提供了更為友好的界面。推動(dòng)了扁平化設(shè)計(jì)風(fēng)格的發(fā)展，而這種風(fēng)格恰恰適應(yīng)了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)與推廣，不論是分辨率、圖片尺寸、以及相關(guān)腳本功能，都能夠很好的自動(dòng)切換，以適應(yīng)不同的設(shè)備，實(shí)現(xiàn)了界面的扁平化，得到了完美的視覺(jué)效果。

4　結(jié)語(yǔ)

響應(yīng)式網(wǎng)頁(yè)的出現(xiàn)代表了移動(dòng)終端Web開(kāi)發(fā)的發(fā)展趨勢(shì)。在這種情況下，將會(huì)有更多的自適應(yīng)網(wǎng)頁(yè)被使用。而一定程度上取代固定寬度網(wǎng)頁(yè)也是很有可能的。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)所采用的三大技術(shù)并不是什么新穎的技術(shù)，而Ethan Marcotte卻將它們結(jié)合了起來(lái)，為網(wǎng)頁(yè)設(shè)計(jì)打開(kāi)了一扇新的大門(mén)，這對(duì)前端設(shè)計(jì)師無(wú)疑是一種啟示，只有不斷擴(kuò)大新知識(shí)層面，開(kāi)闊自己的視野，不斷創(chuàng)新，才會(huì)適應(yīng)不斷變化的社會(huì)改革。

參考文獻(xiàn)

戴慧萍.響應(yīng)式設(shè)計(jì)對(duì)網(wǎng)頁(yè)界面的影響[J].藝術(shù)教育.2015，（01）：250.

田紅玉，（1980.11-）男，黑龍江省哈爾濱市人，本科，研究方向：網(wǎng)站設(shè)計(jì)。

Responsive web design and Implementation

Tian Hongyu
（Heilongjiang Information Technology Vocational College， HeilongjiangHarbin， 150025）

Abstract：Responsive web design can make the performance of the web page to meet the needs of users，more and more responsive web design is widely used.On the basis of explaining the concept of responsive web page， this paper analyzes the advantages of the response page design，and gives the key technology of the response page design.

Keywords：responsive design;web development;Marcotte Ethan

作者簡(jiǎn)介