在你身上是否發(fā)生過如此一件事，就是在你休息的時間用瀏覽器最大化的看一些文章、玩一些網(wǎng)頁游戲正入迷的時候，時間一點點的過去了，馬上到了下午工作的時間了，卻發(fā)現(xiàn)還差一點就看完，于是乎，你把瀏覽器縮小了一些尺寸，瞬間，網(wǎng)頁進行的重組，最后你發(fā)現(xiàn)你想看的內(nèi)容就這樣消失了，或是以一種難以閱讀的方式呈現(xiàn)在你面前。這時你會希望，這要是響應(yīng)式Web設(shè)計…該多好。

現(xiàn)今，無論是移動設(shè)備還是平板電腦亦或是PC屏幕，都有著各異的屏幕大小，若是針對每個屏幕大小單獨設(shè)計一個解決方案會顯得如此的繁瑣和笨拙。響應(yīng)式Web設(shè)計的概念就是可以讓網(wǎng)頁根據(jù)用戶的使用環(huán)境進行自動調(diào)整，并有效的解決掉了用戶體驗度這一問題。

如此一說，響應(yīng)式Web究竟是現(xiàn)今的大勢所趨，還是因為各種設(shè)備的產(chǎn)生而誕生出的一種時代產(chǎn)物呢？下面，我們先了解一下響應(yīng)式設(shè)計。

傳統(tǒng)網(wǎng)頁如何變成響應(yīng)式

響應(yīng)式Web設(shè)計已經(jīng)成為目前主流的設(shè)計模式，那么對于那些以前固定好寬度和像素的頁面來說，很多人都在想應(yīng)該如何讓它實現(xiàn)響應(yīng)式？是否要進行網(wǎng)頁的重構(gòu)？那么傳統(tǒng)網(wǎng)頁如何變成響應(yīng)式設(shè)計呢？51CTO的記者從采訪中了解到，在傳統(tǒng)的web設(shè)計中，就提倡在CSS文件里將頁面的布局、顏色、字體設(shè)計等分開，如果在當(dāng)初進行設(shè)計時遵守了這一原則，那么在響應(yīng)式web設(shè)計中，只需要更改頁面布局這一部分的CSS內(nèi)容即可。對于固定好寬度和像素的頁面，也只需要按比例換算成百分比模式便可。

響應(yīng)式Web設(shè)計的基本原理就是寬度使用百分比制以及利用CSS3 Media Queries語句事先設(shè)定各種分辨率下的頁面布局。相當(dāng)于對同一個網(wǎng)頁，設(shè)計師要進行好幾份設(shè)計（例如寬屏下的三欄設(shè)計、普通屏幕下的兩欄設(shè)計以及移動設(shè)備上的單欄設(shè)計等）。但現(xiàn)在似乎還沒有一個比較統(tǒng)一的CSS框架或設(shè)計模式來減少CSS設(shè)計師的工作量。

對于是否需要進行頁面重構(gòu)，這就需要看網(wǎng)頁在“裸奔”情況下是否可以有序的展示，如果在CSS無效的情況下網(wǎng)頁無法有序地展示內(nèi)容，那么是必須重構(gòu)的，其實這跟是否進行web響應(yīng)式設(shè)計無關(guān)，是對頁面結(jié)構(gòu)的最基本要求。

一般而言，出于展示的原因，移動設(shè)備可能不太適合諸如內(nèi)嵌網(wǎng)頁地圖等元素，這就需要在CSS文件里面做相應(yīng)的屏蔽設(shè)置。另外，若從用戶的手機流量方面考慮的話，大頁面最好還是進行重構(gòu)，以減小用戶向服務(wù)器請求的數(shù)據(jù)量。因為過大的數(shù)據(jù)請求一方面會增加用戶在手機流量上的開銷，更重要的一方面會降低頁面的加載速度，導(dǎo)致移動設(shè)備的用戶體驗變差。

淺談響應(yīng)式Web設(shè)計的用戶體驗

一個網(wǎng)站若是沒有一個良好的用戶體驗度，那么就算里面的內(nèi)容在誘人，也無心閱讀下去。響應(yīng)式Web設(shè)計雖然可以合理的呈現(xiàn)給我們想要閱讀的內(nèi)容，但并不是將整個網(wǎng)頁完美的縮放給我們，對于那些沒有呈現(xiàn)出來的內(nèi)容，我們是否也需要加載出來？這樣對于移動設(shè)備來說是否也是一種弊端呢？

51CTO的記者通過采訪中了解到鑒于移動設(shè)備屏幕大小的限制，在其上進行顯示的內(nèi)容一般是經(jīng)過精心篩選的，過多的內(nèi)容會使頁面看起來雜亂不堪，用戶也很難找到自己想要的東西，比較好的做法是留下少部分最重要的內(nèi)容直接進行展示，其余的部分可以先隱藏起來，用戶點擊時再展開，這樣信息都保留在了頁面上，但是不會一次性的全都推到用戶面前，用戶可以按需索取想要了解的內(nèi)容。對于移動設(shè)備流量上的考慮，最好還是設(shè)計成ajax模式，而不是預(yù)先加載過多的頁面數(shù)據(jù)，這樣可以節(jié)省很大一部分的流量。

支持響應(yīng)式Web設(shè)計的條件

響應(yīng)式設(shè)計之所以會產(chǎn)生是由于新出現(xiàn)的各種設(shè)備（如智能手機、Pad、Tablet、寬屏電視、普通電腦顯示器等）的瀏覽器（或瀏覽器模塊，如android系統(tǒng)的webView等）支持對CSS3 Media Queries的解析。

響應(yīng)式Web設(shè)計或許還是無法普及到傳統(tǒng)的非智能手機，但是對于采用主流移動OS的手機都是可以支持的。看到這里我們就會想一個問題，未來是否會出現(xiàn)一種新的設(shè)備，是響應(yīng)式Web設(shè)計無法實現(xiàn)的？其實對于將來的新設(shè)備，只要其中的瀏覽器支持CSS3特性，那么它依然可以支持響應(yīng)式Web設(shè)計。

響應(yīng)式Web設(shè)計究竟是大勢所趨還只是時代的產(chǎn)物？

響應(yīng)式Web設(shè)計是在展示設(shè)備日趨多樣化這一背景下產(chǎn)生的，可以預(yù)見，只要設(shè)備生產(chǎn)廠商一日不統(tǒng)一，響應(yīng)式Web設(shè)計就會一直發(fā)展以滿足不同規(guī)格設(shè)備的頁面展示，如此看來確實給我們呈現(xiàn)出一種時代產(chǎn)物的感覺。

但對于未來幾年內(nèi)不斷發(fā)展的移動設(shè)備、電腦設(shè)備、平板設(shè)備，若是沒有響應(yīng)式Web設(shè)計誰知道我們誰會知道究竟還要開發(fā)多少個不同的頁面。并且說道大勢所趨，我們就不得不想到和響應(yīng)式Web設(shè)計比較緊密且十分火熱的HTML 5 了，HTML5可以用來做一些很酷的Web應(yīng)用。而響應(yīng)式web設(shè)計利用CSS3的特性可以彈性布局頁面上的元素，對HTML5開發(fā)的Web應(yīng)用而言是一大助力。雖然和HTML 5 一樣，響應(yīng)式Web設(shè)計還沒有得到很好的普及，但兩者皆已成為一種趨勢，就讓我們拭目以待的看他們會為我們帶來什么樣的驚喜吧。

轉(zhuǎn)載于:https://www.cnblogs.com/cquljw/archive/2013/03/13/2958379.html

總結(jié)

以上是生活随笔為你收集整理的（转）响应式Web设计是大势所趋还是时代的产物的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。