什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技巧

新聞 2023-04-05編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 網(wǎng)頁(yè)設(shè)計(jì) 響應(yīng)

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國(guó)際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營(yíng)銷(xiāo)系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營(yíng)銷(xiāo)網(wǎng)站的效果】重長(zhǎng)尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿(mǎn)意為止
【專(zhuān)屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專(zhuān)屬VIP服務(wù)

    一、什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？

　　響應(yīng)式設(shè)計(jì)的概念最早由Ehan Marcotte在2010年5月份的文章 <響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)>中提出。 他強(qiáng)調(diào)：頁(yè)面可以根據(jù)用戶(hù)的設(shè)備環(huán)境，包括系統(tǒng)，分辨率，屏幕尺寸等等因素，進(jìn)行自發(fā)式調(diào)整，提供更適合當(dāng)前環(huán)境的閱讀和操作體驗(yàn)，對(duì)已有和未來(lái)即將出現(xiàn)的新設(shè)備有一定的適應(yīng)能力?？梢哉f(shuō)響應(yīng)式設(shè)計(jì)能夠完美解決文章開(kāi)頭提到的問(wèn)題，小到智能手表的屏幕，大到電視顯示屏，只需要一套代碼就能夠完美兼容，實(shí)用且高效。

　　當(dāng)我們搜索有關(guān)響應(yīng)式設(shè)計(jì)的資料時(shí)卻發(fā)現(xiàn)大多數(shù)教程都是針對(duì)前端開(kāi)發(fā)工程師撰寫(xiě)的，有著許多難懂的專(zhuān)業(yè)名詞，讓人望而卻步。

　　以下筆者通過(guò)案例，簡(jiǎn)單介紹有關(guān)響應(yīng)式設(shè)計(jì)的技巧。

　　二、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技巧：

　　Ehan Marcotte的文章中提到了三個(gè)概念：流動(dòng)布局(Fluid grids)、媒介查詢(xún)(Media queries)和彈性圖片(Scalable images)。這些概念原本指的是實(shí)現(xiàn)響應(yīng)式的一些技術(shù)手段，從設(shè)計(jì)師的角度，我們可以簡(jiǎn)化為以下兩點(diǎn)。

　　一、分段響應(yīng)

　　通過(guò)拖動(dòng)瀏覽器的寬度，我們會(huì)發(fā)現(xiàn)響應(yīng)式網(wǎng)頁(yè)會(huì)隨寬度的改變自動(dòng)調(diào)整布局方式。

　　需要注意的是，每當(dāng)瀏覽器達(dá)到一個(gè)寬度節(jié)點(diǎn)，網(wǎng)頁(yè)布局就會(huì)相應(yīng)發(fā)生較大變化，這就是分段響應(yīng)。這里我們又需要注意兩個(gè)要點(diǎn)：

　　1、- 寬度節(jié)點(diǎn)應(yīng)該如何確定?

　　2、- 達(dá)到寬度節(jié)點(diǎn)時(shí)頁(yè)面布局應(yīng)該如何變化?

　　3、寬度節(jié)點(diǎn)應(yīng)該如何確定?

　　寬度節(jié)點(diǎn)來(lái)源于前文提到的媒體查詢(xún)(Media queries)，是前端工程師用簡(jiǎn)單的方法，來(lái)獲取不同設(shè)備的特征，例如設(shè)備的寬度/高度，窗口的寬度/高度，設(shè)備的手持方向，分辨率等。設(shè)計(jì)時(shí)也可以采用相同的思路，參考網(wǎng)站用戶(hù)的設(shè)備分辨率數(shù)據(jù)，比如手機(jī)尺寸、平板電腦尺寸及桌面顯示器尺寸，確保常見(jiàn)設(shè)備寬度能夠落入到某一設(shè)計(jì)范圍之內(nèi)。

　　達(dá)到寬度節(jié)點(diǎn)時(shí)頁(yè)面布局應(yīng)該如何變化?

　　頁(yè)面布局的變化可以簡(jiǎn)單歸納為三點(diǎn)：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。

　　內(nèi)容增減--當(dāng)瀏覽器寬度較大時(shí)，有足夠的空間展示更多的頁(yè)面內(nèi)容。隨著瀏覽器寬度的減小，為了使有限的頁(yè)面不至于擁擠，就不得不對(duì)原有內(nèi)容進(jìn)行部分隱藏以滿(mǎn)足整體布局的合理性。

　　布局調(diào)整--如同前文提到的，當(dāng)頁(yè)面空間被壓縮時(shí)，其布局方式也需要相應(yīng)變化，最常見(jiàn)的就是布局的行列數(shù)發(fā)生改變。

　　樣式變更--頁(yè)面中的有些模塊，例如導(dǎo)航欄等不能簡(jiǎn)單的只隱藏部分內(nèi)容來(lái)適應(yīng)瀏覽器的變化，這時(shí)就需要調(diào)整其樣式，將整個(gè)模塊變更為其他形式展現(xiàn)，以方便小尺寸設(shè)備的使用體驗(yàn)。

　　總的來(lái)說(shuō)，分段響應(yīng)就是頁(yè)面針對(duì)不同的瀏覽器寬度展示不同的布局方式。每個(gè)組件都可以根據(jù)具體使用場(chǎng)景應(yīng)用不同的變化類(lèi)型。

　　二、動(dòng)態(tài)布局

　　解決了分段響應(yīng)的規(guī)則后，接下來(lái)需要制定瀏覽器在寬度節(jié)點(diǎn)之間變化時(shí)，組件該如何變動(dòng)，即動(dòng)態(tài)布局。

　　這里再次搬出Ehan Marcotte的文章所提到的流動(dòng)布局的概念，原特指以百分比為度量單位的布局技術(shù)實(shí)現(xiàn)方式。這里就不對(duì)如流動(dòng)布局、彈性布局、流體柵格等各種概念做一一說(shuō)明。筆者就此統(tǒng)為一個(gè)大的概念：在響應(yīng)式設(shè)計(jì)的布局中，不再以像素(px)作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設(shè)計(jì)出更具靈活性的布局方式。

　　三、其他需要注意的點(diǎn)

　　首先，要注意的是什么情況下適合采用響應(yīng)式設(shè)計(jì)?一切設(shè)計(jì)的最終目的都應(yīng)該圍繞著產(chǎn)品體驗(yàn)這一核心。為了做響應(yīng)式設(shè)計(jì)而做響應(yīng)式設(shè)計(jì)，往往得不償失。

　　其次，在搞清楚產(chǎn)品本身的核心用戶(hù)體驗(yàn)之后，選取你的用戶(hù)群體所使用的硬件設(shè)備，這個(gè)時(shí)候你應(yīng)該了解每種設(shè)備所使用的場(chǎng)景，設(shè)備使用的環(huán)境和場(chǎng)景是設(shè)計(jì)的重要依據(jù)。

　　最后，并非所有的內(nèi)容都符合不同設(shè)備的使用場(chǎng)景，比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當(dāng)中，每種設(shè)備的使用場(chǎng)景不同，應(yīng)該匹配的用戶(hù)體驗(yàn)也不一樣。比如移動(dòng)端用戶(hù)和桌面端用戶(hù)的需求就是不同的，場(chǎng)景差異也很大。

　　以上就是關(guān)于響應(yīng)式設(shè)計(jì)的分享，希望對(duì)你有用。

• 上一章：網(wǎng)站設(shè)計(jì)做的好對(duì)企業(yè)有什么幫助
• 下一章：企業(yè)為什么要做網(wǎng)站建設(shè)呢?