什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)？
響應(yīng)式Web設(shè)計(jì)（Responsive Web Design, 簡(jiǎn)稱RWD），是一種統(tǒng)一的解決方案，可以讓W(xué)eb作品適配手機(jī)、平板和桌面電腦。響應(yīng)式的網(wǎng)站可以適應(yīng)用戶的屏幕大小，為今天和明天的設(shè)備都提供最佳用戶體驗(yàn)。
——Ben Frain, Responsive Web Design with HTML5 and CSS3
- “響應(yīng)式網(wǎng)頁設(shè)計(jì)” 是Ethan Marcotte在2010年發(fā)明的，他發(fā)布了一篇同名文章用于介紹一種新的網(wǎng)頁設(shè)計(jì)方案,運(yùn)用三種已有的技術(shù)，彈性網(wǎng)格布局（fluid grid）、彈性圖片/媒體（flxible images）、媒體查詢（media queries），來實(shí)現(xiàn)網(wǎng)頁的彈性設(shè)計(jì)。
三大實(shí)現(xiàn)技術(shù)
- 彈性網(wǎng)格布局 與固定像素布局不同，彈性網(wǎng)格布局會(huì)使網(wǎng)頁布局因用戶使用設(shè)備的屏幕大小而彈性地改變布局方式，以達(dá)到更好的排版、提高瀏覽體驗(yàn)。
- 彈性圖片/媒體 指的是 圖片或媒體信息可以因?yàn)g覽器窗口大小的變化而變化其排列方式或大小，避免PC用戶縮小窗口后圖片過大、智能手機(jī)用戶圖片、媒體顯示不全的情況。
- 媒體查詢 CSS的媒體查詢可以獲取用戶所用設(shè)備的分辨率信息，進(jìn)而利用這部分?jǐn)?shù)據(jù)為用戶提供更適合其設(shè)備的網(wǎng)頁布局。
響應(yīng)式（Responsive）
響應(yīng)式指的是網(wǎng)頁會(huì)通過CSS的媒體查詢獲取用戶使用設(shè)備的屏幕大小，因而調(diào)整布局，使得不同大小屏幕有不同的顯示效果，以適應(yīng)不同設(shè)備的
這樣的好處就是可以讓使用智能手機(jī)和平板的用戶得到更好的上網(wǎng)體驗(yàn)，不會(huì)因網(wǎng)頁頁面過大導(dǎo)致難以閱讀和點(diǎn)擊。
沒有經(jīng)過響應(yīng)式設(shè)計(jì)的網(wǎng)頁在手機(jī)等較小屏幕的設(shè)備中就會(huì)引起很多操作上的困難。
為什么要用響應(yīng)式設(shè)計(jì)
以 中山大學(xué)官網(wǎng) 為例，因?yàn)槠渲饕脩舳际请娔X用戶，很少有通過智能手機(jī)等移動(dòng)設(shè)備進(jìn)行瀏覽，所以其官網(wǎng)并沒有運(yùn)用響應(yīng)式設(shè)計(jì)，但是當(dāng)我們只能用手機(jī)查看網(wǎng)頁時(shí)，這就無形中為瀏覽造成麻煩。
在上圖我們可以看出，中山大學(xué)官網(wǎng)的設(shè)計(jì)在PC端的顯示是完好的，能夠提供良好的體驗(yàn)。
再看看中山大學(xué)官網(wǎng)在安卓手機(jī)瀏覽器中的顯示，頁面布局沒有明顯的改變，但是因?yàn)槭謾C(jī)屏幕比較小，我們用手指點(diǎn)擊相關(guān)通知或者文章的時(shí)候就非常容易誤觸，影響使用效率和降低用戶體驗(yàn)，作為官方機(jī)構(gòu)的官網(wǎng)，這樣的設(shè)計(jì)可以減少建設(shè)成本，一勞永逸。但是，如果是用于商業(yè)用途的網(wǎng)站，這樣的網(wǎng)頁設(shè)計(jì)在將來將是致命的。
天貓商城 就運(yùn)用了響應(yīng)式網(wǎng)頁設(shè)計(jì)，在用戶設(shè)備分辨率在改變時(shí)自動(dòng)適應(yīng)排版、擴(kuò)大或縮小圖片，以到達(dá)更好的用戶體驗(yàn)，同時(shí)考慮橫屏、縱屏的不同情況。
- 在同一URL下，天貓商城顯示了多種表現(xiàn)方式，既減少網(wǎng)頁的設(shè)計(jì)成本，又提高了用戶體驗(yàn)。
各種智能設(shè)備的市場(chǎng)占有率
從上圖我們可以得知，目前智能手機(jī)的市場(chǎng)占有率高于PC，而且未來可能還會(huì)誕生更多的主流智能設(shè)備、單純?yōu)镻C端設(shè)計(jì)的網(wǎng)頁必將會(huì)被淘汰。
響應(yīng)式Web設(shè)計(jì)和前端后端的關(guān)系
前端 or 后端 設(shè)計(jì)？
前端設(shè)計(jì)主要是用戶所使用的界面的設(shè)計(jì)，是用戶所接觸最多的部分，直接影響用戶體驗(yàn)，所有網(wǎng)站的顯示效果都是由前端設(shè)計(jì)完成的。
后端設(shè)計(jì) 是網(wǎng)頁運(yùn)行的數(shù)據(jù)庫部分，是網(wǎng)頁的骨架。
RWD 中的 JavaScript 和 CSS 主要是負(fù)責(zé)網(wǎng)頁的前端設(shè)計(jì)，JavaScript 用于設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁，使用戶可以通過官網(wǎng)得到想要的相關(guān)連接，引導(dǎo)用戶流向所需要的內(nèi)容。
RWD 中的 HTML 就是 后端設(shè)計(jì) 所用的工具，是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)。
