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

前言：本站為你精心整理了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)范文，希望能為你的創(chuàng)作提供參考價(jià)值，我們的客服老師可以幫助你提供個(gè)性化的參考范文，歡迎咨詢。

摘要：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠讓網(wǎng)頁(yè)的表現(xiàn)效果達(dá)到用戶的需求，越來(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è)開發(fā)；EthanMarcotte

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

近些年來(lái)，移動(dòng)智能設(shè)備發(fā)展迅猛，用戶們可以在各種終端上進(jìn)行訪問(wèn)，如：個(gè)人電腦、平板電腦、智能手機(jī)等各種途徑進(jìn)行訪問(wèn)。如何能使同一個(gè)網(wǎng)站在許多不同分辨率的屏幕和設(shè)備上都可以很好的顯示出來(lái)，不會(huì)出現(xiàn)排版的混亂。EthanMarcotte在2010年提出的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，解決了根據(jù)人的行為自動(dòng)調(diào)整空間環(huán)境這一難題。響應(yīng)式設(shè)計(jì)根據(jù)用戶不同的設(shè)備環(huán)境做出響應(yīng)，提出了一個(gè)空間應(yīng)該根據(jù)環(huán)境和存在其中的人的變化進(jìn)行響應(yīng)。頁(yè)面的設(shè)計(jì)與開發(fā)根據(jù)用戶的行為以及設(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ì)概念沒有出現(xiàn)之前的固定寬度為主的頁(yè)面布局，有很多的特點(diǎn)及優(yōu)勢(shì)：優(yōu)勢(shì)1，響應(yīng)式網(wǎng)頁(yè)可以很好地解決移動(dòng)終端設(shè)備顯示差異的問(wèn)題，當(dāng)用戶使用不同分辨率和屏幕大小的多種設(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ī)則排列在屏幕外，用戶通過(guò)滑動(dòng)或滾動(dòng)屏幕就可以瀏覽其余信息。優(yōu)勢(shì)2，在用戶使用平板電腦、智能手機(jī)等的時(shí)候，智能設(shè)備可以根據(jù)用戶的持握方向，主動(dòng)調(diào)整等用戶行為進(jìn)行橫屏豎屏切換。橫屏和豎屏的切換是發(fā)生在一瞬間的，而采用響應(yīng)式的網(wǎng)頁(yè)在這一瞬間也能根據(jù)不同的方向以及屏幕尺寸，做出迅速的響應(yīng)，使網(wǎng)頁(yè)呈現(xiàn)出最佳的布局效果。優(yōu)勢(shì)3，采用響應(yīng)式開發(fā)的頁(yè)面，可以減少維護(hù)成本，在目前人們生活中使用的的多種設(shè)備平臺(tái)上只需要一個(gè)網(wǎng)頁(yè)的開發(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ù)：媒體查詢、液態(tài)圖片、液態(tài)網(wǎng)格布局。

3.1媒體查詢技術(shù)

具體來(lái)說(shuō)，就是可以根據(jù)用戶終端的介質(zhì)和屏幕大小，提供不同的樣式表或者只展示樣式表中的一部分，即根據(jù)設(shè)備的特點(diǎn)進(jìn)行辨別，由此確定使用不同的css樣式。在媒體查詢技術(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)潔明了，給用戶良好的視覺效果及體驗(yàn)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)為設(shè)計(jì)師們打開了新的思路，EthanMarcotte將媒體查詢、彈性圖片、液態(tài)網(wǎng)格布局技術(shù)結(jié)合應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中，為網(wǎng)頁(yè)開發(fā)和維護(hù)帶來(lái)巨大的好處，幾乎適應(yīng)所有設(shè)備的屏幕，降低了網(wǎng)站的開發(fā)與維護(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)了界面的扁平化，得到了完美的視覺效果。

4結(jié)語(yǔ)

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

參考文獻(xiàn)

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

作者：田紅玉 單位：黑龍江信息技術(shù)職業(yè)學(xué)院