響應(yīng)式網(wǎng)頁開發(fā)設(shè)計(jì)在實(shí)際中的應(yīng)用

時(shí)間：2023-09-10 19:36:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-10 19:36:01 來源：網(wǎng)站運(yùn)營

響應(yīng)式網(wǎng)頁開發(fā)設(shè)計(jì)在實(shí)際中的應(yīng)用：在這個(gè)手機(jī)、ipad層出不窮的時(shí)代，對于網(wǎng)站來說根本不可能為每種設(shè)備都開發(fā)個(gè)版本出來，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，我們又不想失去任何一個(gè)用戶，這可苦了我這些設(shè)計(jì)師了，需要付出更多的心血來獲得更好的體驗(yàn)。

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)，理念是設(shè)計(jì)和開發(fā)應(yīng)根據(jù)屏幕的大小、平臺的用戶的行為和環(huán)境基礎(chǔ)上自動(dòng)調(diào)整；他應(yīng)該有一個(gè)靈活的網(wǎng)格和布局，圖像和CSS能夠智能的組合使用。

比如說用戶從電腦切換到ipad，網(wǎng)站能夠自動(dòng)切換以適應(yīng)分辨率，圖像大小和腳本。

換句話說，網(wǎng)站應(yīng)該具備根據(jù)用戶的使用環(huán)境來自動(dòng)調(diào)整，這可以減少不必要的重復(fù)設(shè)計(jì)。

響應(yīng)式Web設(shè)計(jì)的概念

Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過一篇文章“Responsive Web Design”，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念：

所謂響應(yīng)式建筑設(shè)計(jì)就是設(shè)計(jì)師嘗試建造一種使用一些傳感器檢測周圍環(huán)境，比如說溫度、濕度、光線等等自動(dòng)進(jìn)行調(diào)整的房子。

現(xiàn)在我們把這個(gè)思路延伸到 WEB設(shè)計(jì)領(lǐng)域。

我們可以想，為啥我們要為每個(gè)用戶群各自打造一套設(shè)計(jì)方案呢？我們太笨了，有沒有更智能的做法？和響應(yīng)式建筑設(shè)計(jì)一樣，web設(shè)計(jì)也應(yīng)該 做到智能調(diào)整。

顯然web設(shè)計(jì)不能使用傳感器，這就要更多的抽象思維。好在現(xiàn)在一些概念已經(jīng)得到實(shí)踐了，比如液態(tài)布局、 幫助頁面重新格式化的media queries和腳本等。但是響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對于設(shè)計(jì)的全新思維模式。

調(diào)整分辨率

不同的設(shè)備都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不斷被研發(fā)的各種新設(shè)備也將出現(xiàn)新的屏幕尺寸規(guī)格。

有些設(shè)備 基于橫屏 (portrait)，有些是豎屏(landscape)，甚至還有正方形；對于日益流行的iPhone、iPad及其他一些智能手機(jī)、平板電腦，用戶還 可以通過轉(zhuǎn)動(dòng)設(shè)備來任意切換屏幕的定向方式。

怎樣才能做到讓一種設(shè)計(jì)方案滿足所有情況？




要想做到同時(shí)兼容橫、豎屏(用戶還有可能在頁面加載的過程中切換方向)，我們就必須考慮N種屏幕尺寸規(guī)格。

我們可以將這些規(guī)格劃分為幾個(gè)大類，然后為每一類做一種方案，確保該方案至少在本組中盡量具有彈性。

但即使這樣，結(jié)果也將是非常不爽的，誰知道某類設(shè)備在5年之后的 占有率是多少？而且很多用戶甚至不去將瀏覽器的窗口最大化。

Morten Hjerde對2005至2008年市場中的400余種移動(dòng)設(shè)備進(jìn)行了統(tǒng)計(jì)(查看報(bào)告)，下圖為大致統(tǒng)計(jì)結(jié)果：




在08年之后，更多更有代表性的新設(shè)備問世并普及了。

顯然，我們不可以沿著“多方案”的思路繼續(xù)走下去；那么我們應(yīng)該怎樣做呢？

1、觸屏與鼠標(biāo)




觸屏設(shè)備已經(jīng)成為主流。雖然目前多數(shù)觸屏設(shè)備還是小屏幕類型的產(chǎn)品，比如手機(jī)，但是市場上越來越多的大屏幕設(shè)備也開始使用觸屏技術(shù)；且不說iPad一類的平板電腦，就連一些筆記本和臺式機(jī)也加入了這一行列。

比如HP Touchsmart tm2t，即使用傳統(tǒng)的鍵鼠設(shè)備，同時(shí)也加入了觸屏技術(shù)。

相比于傳統(tǒng)的基于鼠標(biāo)指針的互動(dòng)，觸屏技術(shù)顯然帶來了截然不同的交互方式與相應(yīng)的設(shè)計(jì)規(guī)范；兩者又有各自所適用的領(lǐng)域。

所幸，要使我們的設(shè)計(jì)方案同時(shí)滿足這兩類設(shè)備的規(guī)范，并非一件難事，只是有些地方需要注意。

比如，觸屏設(shè)備無法反映CSS定義的hover行為及相應(yīng)的樣 式，因?yàn)樗鼪]有鼠標(biāo)指針的概 念，手指點(diǎn)擊就是click行為。所以不要讓任何功能依賴于對hover狀態(tài)的觸發(fā)。

2、響應(yīng)式圖片




由Filament Group提出的”響應(yīng)式圖片”技術(shù)思想，有助于解決上面提到的問題：不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率?？梢钥聪耫emo頁面先。

這個(gè)技術(shù)的實(shí)現(xiàn)需要使用幾個(gè)相關(guān)文件，我們可以在Github上獲取。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件，以及一些范例資源文件。

具體使用方法可以參考Responsive Images的說明文檔。大致的原理是，rwd-images.js會(huì)檢測當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片、腳 本和樣式表加載請求定向到一個(gè)虛擬路徑”/rwd-router”。
當(dāng)這些請求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請求所需要的是原始圖片還是 小尺寸的”響應(yīng)式圖片”，并進(jìn)行相應(yīng)的反饋輸出。對于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。

響應(yīng)式web設(shè)計(jì)并不是最好的，這只是個(gè)單純的概念，它可以有效的提高用戶體驗(yàn)但是卻不能徹底解決。我們要面對不斷出現(xiàn)的新設(shè)備出現(xiàn)，找出一個(gè)更好的解決方案，不斷的改善用戶體驗(yàn)。

易點(diǎn)科技成立于2009年，一直專注于IT顧問咨詢、信息平臺系統(tǒng)開發(fā)、企業(yè)網(wǎng)絡(luò)方案解決與運(yùn)營。服務(wù)內(nèi)容包含pc+手機(jī)響應(yīng)網(wǎng)站建設(shè)、B2C購物商城定制開發(fā)、微信公眾號定制開發(fā)、企業(yè)管理小型系統(tǒng)定制開發(fā)。擁有先進(jìn)的網(wǎng)頁設(shè)計(jì)制作理念、可靠的質(zhì)量保障體系。十年專注！已服務(wù)過數(shù)百家知名品牌企業(yè),積累了眾多行業(yè)標(biāo)桿級的經(jīng)典案例。

原文來自：https://www.edh5.com/news-det-348.html