建站
咨詢
售后
建站咨詢
新聞中心
在你身上是否發(fā)生過如此一件事，就是在你休息的時(shí)間用瀏覽器最大化的看一些文章、玩一些網(wǎng)頁(yè)游戲正入迷的時(shí)候，時(shí)間一點(diǎn)點(diǎn)的過去了，馬上到了下午工作的時(shí)間了，卻發(fā)現(xiàn)還差一點(diǎn)就看完，于是乎，你把瀏覽器縮小了一些尺寸，瞬間，網(wǎng)頁(yè)進(jìn)行的重組，最后你發(fā)現(xiàn)你想看的內(nèi)容就這樣消失了，或是以一種難以閱讀的方式呈現(xiàn)在你面前。這時(shí)你會(huì)希望，這要是響應(yīng)式Web設(shè)計(jì)…該多好。
現(xiàn)今，無(wú)論是移動(dòng)設(shè)備還是平板電腦亦或是PC屏幕，都有著各異的屏幕大小，若是針對(duì)每個(gè)屏幕大小單獨(dú)設(shè)計(jì)一個(gè)解決方案會(huì)顯得如此的繁瑣和笨拙。響應(yīng)式Web設(shè)計(jì)的概念就是可以讓網(wǎng)頁(yè)根據(jù)用戶的使用環(huán)境進(jìn)行自動(dòng)調(diào)整，并有效的解決掉了用戶體驗(yàn)度這一問題。
如此一說(shuō)，響應(yīng)式Web究竟是現(xiàn)今的大勢(shì)所趨，還是因?yàn)楦鞣N設(shè)備的產(chǎn)生而誕生出的一種時(shí)代產(chǎn)物呢？下面，我們先了解一下響應(yīng)式設(shè)計(jì)。
傳統(tǒng)網(wǎng)頁(yè)如何變成響應(yīng)式
響應(yīng)式Web設(shè)計(jì)已經(jīng)成為目前主流的設(shè)計(jì)模式，那么對(duì)于那些以前固定好寬度和像素的頁(yè)面來(lái)說(shuō)，很多人都在想應(yīng)該如何讓它實(shí)現(xiàn)響應(yīng)式？是否要進(jìn)行網(wǎng)頁(yè)的重構(gòu)？那么傳統(tǒng)網(wǎng)頁(yè)如何變成響應(yīng)式設(shè)計(jì)呢？的記者從采訪中了解到，在傳統(tǒng)的web設(shè)計(jì)中，就提倡在CSS文件里將頁(yè)面的布局、顏色、字體設(shè)計(jì)等分開，如果在當(dāng)初進(jìn)行設(shè)計(jì)時(shí)遵守了這一原則，那么在響應(yīng)式web設(shè)計(jì)中，只需要更改頁(yè)面布局這一部分的CSS內(nèi)容即可。對(duì)于固定好寬度和像素的頁(yè)面，也只需要按比例換算成百分比模式便可。
響應(yīng)式Web設(shè)計(jì)的基本原理就是寬度使用百分比制以及利用CSS3 Media Queries語(yǔ)句事先設(shè)定各種分辨率下的頁(yè)面布局。相當(dāng)于對(duì)同一個(gè)網(wǎng)頁(yè)，設(shè)計(jì)師要進(jìn)行好幾份設(shè)計(jì)（例如寬屏下的三欄設(shè)計(jì)、普通屏幕下的兩欄設(shè)計(jì)以及移動(dòng)設(shè)備上的單欄設(shè)計(jì)等）。但現(xiàn)在似乎還沒有一個(gè)比較統(tǒng)一的CSS框架或設(shè)計(jì)模式來(lái)減少CSS設(shè)計(jì)師的工作量。
對(duì)于是否需要進(jìn)行頁(yè)面重構(gòu)，這就需要看網(wǎng)頁(yè)在“裸奔”情況下是否可以有序的展示，如果在CSS無(wú)效的情況下網(wǎng)頁(yè)無(wú)法有序地展示內(nèi)容，那么是必須重構(gòu)的，其實(shí)這跟是否進(jìn)行web響應(yīng)式設(shè)計(jì)無(wú)關(guān)，是對(duì)頁(yè)面結(jié)構(gòu)的最基本要求。
一般而言，出于展示的原因，移動(dòng)設(shè)備可能不太適合諸如內(nèi)嵌網(wǎng)頁(yè)地圖等元素，這就需要在CSS文件里面做相應(yīng)的屏蔽設(shè)置。另外，若從用戶的手機(jī)流量方面考慮的話，大頁(yè)面最好還是進(jìn)行重構(gòu)，以減小用戶向服務(wù)器請(qǐng)求的數(shù)據(jù)量。因?yàn)檫^大的數(shù)據(jù)請(qǐng)求一方面會(huì)增加用戶在手機(jī)流量上的開銷，更重要的一方面會(huì)降低頁(yè)面的加載速度，導(dǎo)致移動(dòng)設(shè)備的用戶體驗(yàn)變差。
淺談響應(yīng)式Web設(shè)計(jì)的用戶體驗(yàn)
一個(gè)網(wǎng)站若是沒有一個(gè)良好的用戶體驗(yàn)度，那么就算里面的內(nèi)容在誘人，也無(wú)心閱讀下去。響應(yīng)式Web設(shè)計(jì)雖然可以合理的呈現(xiàn)給我們想要閱讀的內(nèi)容，但并不是將整個(gè)網(wǎng)頁(yè)完美的縮放給我們，對(duì)于那些沒有呈現(xiàn)出來(lái)的內(nèi)容，我們是否也需要加載出來(lái)？這樣對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)是否也是一種弊端呢？
的記者通過采訪中了解到鑒于移動(dòng)設(shè)備屏幕大小的限制，在其上進(jìn)行顯示的內(nèi)容一般是經(jīng)過精心篩選的，過多的內(nèi)容會(huì)使頁(yè)面看起來(lái)雜亂不堪，用戶也很難找到自己想要的東西，比較好的做法是留下少部分最重要的內(nèi)容直接進(jìn)行展示，其余的部分可以先隱藏起來(lái)，用戶點(diǎn)擊時(shí)再展開，這樣信息都保留在了頁(yè)面上，但是不會(huì)一次性的全都推到用戶面前，用戶可以按需索取想要了解的內(nèi)容。對(duì)于移動(dòng)設(shè)備流量上的考慮，最好還是設(shè)計(jì)成ajax模式，而不是預(yù)先加載過多的頁(yè)面數(shù)據(jù)，這樣可以節(jié)省很大一部分的流量。
支持響應(yīng)式Web設(shè)計(jì)的條件
響應(yīng)式設(shè)計(jì)之所以會(huì)產(chǎn)生是由于新出現(xiàn)的各種設(shè)備（如智能手機(jī)、Pad、Tablet、寬屏電視、普通電腦顯示器等）的瀏覽器（或?yàn)g覽器模塊，如android系統(tǒng)的webView等）支持對(duì)CSS3 Media Queries的解析。
響應(yīng)式Web設(shè)計(jì)或許還是無(wú)法普及到傳統(tǒng)的非智能手機(jī)，但是對(duì)于采用主流移動(dòng)OS的手機(jī)都是可以支持的?？吹竭@里我們就會(huì)想一個(gè)問題，未來(lái)是否會(huì)出現(xiàn)一種新的設(shè)備，是響應(yīng)式Web設(shè)計(jì)無(wú)法實(shí)現(xiàn)的？其實(shí)對(duì)于將來(lái)的新設(shè)備，只要其中的瀏覽器支持CSS3特性，那么它依然可以支持響應(yīng)式Web設(shè)計(jì)。
響應(yīng)式Web設(shè)計(jì)究竟是大勢(shì)所趨還只是時(shí)代的產(chǎn)物？
響應(yīng)式Web設(shè)計(jì)是在展示設(shè)備日趨多樣化這一背景下產(chǎn)生的，可以預(yù)見，只要設(shè)備生產(chǎn)廠商一日不統(tǒng)一，響應(yīng)式Web設(shè)計(jì)就會(huì)一直發(fā)展以滿足不同規(guī)格設(shè)備的頁(yè)面展示，如此看來(lái)確實(shí)給我們呈現(xiàn)出一種時(shí)代產(chǎn)物的感覺。
但對(duì)于未來(lái)幾年內(nèi)不斷發(fā)展的移動(dòng)設(shè)備、電腦設(shè)備、平板設(shè)備，若是沒有響應(yīng)式Web設(shè)計(jì)誰(shuí)知道我們誰(shuí)會(huì)知道究竟還要開發(fā)多少個(gè)不同的頁(yè)面。并且說(shuō)道大勢(shì)所趨，我們就不得不想到和響應(yīng)式Web設(shè)計(jì)比較緊密且十分火熱的HTML 5 了，HTML5可以用來(lái)做一些很酷的Web應(yīng)用。而響應(yīng)式web設(shè)計(jì)利用CSS3的特性可以彈性布局頁(yè)面上的元素，對(duì)HTML5開發(fā)的Web應(yīng)用而言是一大助力。雖然和HTML 5 一樣，響應(yīng)式Web設(shè)計(jì)還沒有得到很好的普及，但兩者皆已成為一種趨勢(shì)，就讓我們拭目以待的看他們會(huì)為我們帶來(lái)什么樣的驚喜吧。
當(dāng)前標(biāo)題：響應(yīng)式Web設(shè)計(jì)是大勢(shì)所趨還是時(shí)代的產(chǎn)物
文章出自：http://www.dlmjj.cn/article/coogddp.html
