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

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

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

關(guān)鍵詞：響應(yīng)式設(shè)計；網(wǎng)頁開發(fā)；EthanMarcotte

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

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

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

由于其便捷的功能，被越來越多的網(wǎng)頁設(shè)計師們廣泛應(yīng)用，對比響應(yīng)式網(wǎng)頁設(shè)計概念沒有出現(xiàn)之前的固定寬度為主的頁面布局，有很多的特點及優(yōu)勢：優(yōu)勢1，響應(yīng)式網(wǎng)頁可以很好地解決移動終端設(shè)備顯示差異的問題，當(dāng)用戶使用不同分辨率和屏幕大小的多種設(shè)備瀏覽響應(yīng)式網(wǎng)頁時，頁面會根據(jù)屏幕尺寸，分辨率來進行重新的排版，能展現(xiàn)出更完美的顯示效果。通常情況下，網(wǎng)頁設(shè)計師想最想傳達(dá)的第一重要的內(nèi)容會第一個顯示出來，其余內(nèi)容會根據(jù)設(shè)計師其他的想法，以一種或幾種排序規(guī)則排列在屏幕外，用戶通過滑動或滾動屏幕就可以瀏覽其余信息。優(yōu)勢2，在用戶使用平板電腦、智能手機等的時候，智能設(shè)備可以根據(jù)用戶的持握方向，主動調(diào)整等用戶行為進行橫屏豎屏切換。橫屏和豎屏的切換是發(fā)生在一瞬間的，而采用響應(yīng)式的網(wǎng)頁在這一瞬間也能根據(jù)不同的方向以及屏幕尺寸，做出迅速的響應(yīng)，使網(wǎng)頁呈現(xiàn)出最佳的布局效果。優(yōu)勢3，采用響應(yīng)式開發(fā)的頁面，可以減少維護成本，在目前人們生活中使用的的多種設(shè)備平臺上只需要一個網(wǎng)頁的開發(fā)與維護。同時，在更新網(wǎng)站數(shù)據(jù)的時候也不會出現(xiàn)多個獨立平臺的網(wǎng)頁數(shù)據(jù)更新不同步的情況。響應(yīng)式網(wǎng)頁不同于多個獨立平臺的網(wǎng)頁，不會需要多個域名。

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

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

3.1媒體查詢技術(shù)

具體來說，就是可以根據(jù)用戶終端的介質(zhì)和屏幕大小，提供不同的樣式表或者只展示樣式表中的一部分，即根據(jù)設(shè)備的特點進行辨別，由此確定使用不同的css樣式。在媒體查詢技術(shù)中，max-width與min-width兩個基本參數(shù)，加入?yún)?shù)后可以為網(wǎng)頁設(shè)定出一個寬度范圍，使網(wǎng)頁根據(jù)不同設(shè)備呈現(xiàn)出不同的瀏覽寬度。當(dāng)設(shè)備的屏幕寬度大于這個設(shè)定的值之后，網(wǎng)頁會使用指定好的CSS樣式。如果一個網(wǎng)頁布局上有一個占比百分之二十五屏幕寬度的側(cè)邊欄，它在不同分辨率不同尺寸的屏幕上的顯示效果是不同的，它在比較大的電腦顯示器上是寬屏的，在屏幕比較小的智能手機屏幕上卻是很狹窄的。而在分辨率最高或者最小的屏幕上，它可能就變成了一個非可用的組件。

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

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

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

將頁面內(nèi)容元素設(shè)置成屏幕所對應(yīng)的相對值。為了適應(yīng)不同的屏幕大小，響應(yīng)式網(wǎng)站往往應(yīng)用液態(tài)網(wǎng)格布局，網(wǎng)頁會根據(jù)屏幕的變化進行重排做出適當(dāng)?shù)淖兓赃m應(yīng)屏幕大小以及分辨率等。此布局采用彈性化技術(shù)，可以在不同設(shè)備之間進行變化，與此同時頁面的布局簡潔明了，給用戶良好的視覺效果及體驗。響應(yīng)式網(wǎng)頁設(shè)計為設(shè)計師們打開了新的思路，EthanMarcotte將媒體查詢、彈性圖片、液態(tài)網(wǎng)格布局技術(shù)結(jié)合應(yīng)用到網(wǎng)頁設(shè)計中，為網(wǎng)頁開發(fā)和維護帶來巨大的好處，幾乎適應(yīng)所有設(shè)備的屏幕，降低了網(wǎng)站的開發(fā)與維護的工作量，為用戶提供了更為友好的界面。推動了扁平化設(shè)計風(fēng)格的發(fā)展，而這種風(fēng)格恰恰適應(yīng)了響應(yīng)式網(wǎng)頁設(shè)計的實現(xiàn)與推廣，不論是分辨率、圖片尺寸、以及相關(guān)腳本功能，都能夠很好的自動切換，以適應(yīng)不同的設(shè)備，實現(xiàn)了界面的扁平化，得到了完美的視覺效果。

4結(jié)語

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

參考文獻(xiàn)

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

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