響應式網頁設計與實現

田紅玉（黑龍江信息技術職業學院，黑龍江哈爾濱，150025）

?

響應式網頁設計與實現

田紅玉
（黑龍江信息技術職業學院，黑龍江哈爾濱，150025）

摘要：響應式網頁設計能夠讓網頁的表現效果達到用戶的需求，越來越多的響應式網頁設計被廣泛的應用。論文在闡述響應式網頁概念的基礎上，分析了響應式網頁設計的優勢優勢，給出了響應式網頁設計的關鍵技術。

關鍵詞：響應式設計；網頁開發；Ethan Marcotte

1　響應式網頁設計

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

2　響應式網頁設計的優勢

由于其便捷的功能，被越來越多的網頁設計師們廣泛應用，對比響應式網頁設計概念沒有出現之前的固定寬度為主的頁面布局，有很多的特點及優勢：

優勢1，響應式網頁可以很好地解決移動終端設備顯示差異的問題，當用戶使用不同分辨率和屏幕大小的多種設備瀏覽響應式網頁時，頁面會根據屏幕尺寸，分辨率來進行重新的排版，能展現出更完美的顯示效果。通常情況下，網頁設計師想最想傳達的第一重要的內容會第一個顯示出來，其余內容會根據設計師其他的想法，以一種或幾種排序規則排列在屏幕外，用戶通過滑動或滾動屏幕就可以瀏覽其余信息。

優勢2，在用戶使用平板電腦、智能手機等的時候，智能設備可以根據用戶的持握方向，主動調整等用戶行為進行橫屏豎屏切換。橫屏和豎屏的切換是發生在一瞬間的，而采用響應式的網頁在這一瞬間也能根據不同的方向以及屏幕尺寸，做出迅速的響應，使網頁呈現出最佳的布局效果。

優勢3，采用響應式開發的頁面，可以減少維護成本，在目前人們生活中使用的的多種設備平臺上只需要一個網頁的開發與維護。同時，在更新網站數據的時候也不會出現多個獨立平臺的網頁數據更新不同步的情況。響應式網頁不同于多個獨立平臺的網頁，不會需要多個域名。

3　響應式網頁設計的關鍵技術

響應式網頁的實現包括三種主要技術：媒體查詢、液態圖片、液態網格布局。

3.1媒體查詢技術

具體來說，就是可以根據用戶終端的介質和屏幕大小，提供不同的樣式表或者只展示樣式表中的一部分，即根據設備的特點進行辨別，由此確定使用不同的css樣式。在媒體查詢技術中，max-width與min-width兩個基本參數，加入參數后可以為網頁設定出一個寬度范圍，使網頁根據不同設備呈現出不同的瀏覽寬度。當設備的屏幕寬度大于這個設定的值之后，網頁會使用指定好的CSS樣式。

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

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

3.2液態圖片技術

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

3.3液態網格布局

將頁面內容元素設置成屏幕所對應的相對值。為了適應不同的屏幕大小，響應式網站往往應用液態網格布局，網頁會根據屏幕的變化進行重排做出適當的變化，以適應屏幕大小以及分辨率等。此布局采用彈性化技術，可以在不同設備之間進行變化，與此同時頁面的布局簡潔明了，給用戶良好的視覺效果及體驗。

響應式網頁設計為設計師們打開了新的思路，Ethan Marcotte將媒體查詢、彈性圖片、液態網格布局技術結合應用到網頁設計中，為網頁開發和維護帶來巨大的好處，幾乎適應所有設備的屏幕，降低了網站的開發與維護的工作量，為用戶提供了更為友好的界面。推動了扁平化設計風格的發展，而這種風格恰恰適應了響應式網頁設計的實現與推廣，不論是分辨率、圖片尺寸、以及相關腳本功能，都能夠很好的自動切換，以適應不同的設備，實現了界面的扁平化，得到了完美的視覺效果。

4　結語

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

參考文獻

戴慧萍.響應式設計對網頁界面的影響[J].藝術教育.2015，（01）：250.

田紅玉，（1980.11-）男，黑龍江省哈爾濱市人，本科，研究方向：網站設計。

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

作者簡介