如果你的客戶都在使用手機(jī)、平板等移動(dòng)設(shè)備尋找服務(wù)時(shí)，你的網(wǎng)站是否為響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)就非常重要。

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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（英文為：Responsive web design，通?？s寫為RWD），或稱自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)、對(duì)應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。 是一種針對(duì)目前移動(dòng)設(shè)備網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)做法，該設(shè)計(jì)可使網(wǎng)站在不同的設(shè)備（從桌面電腦顯示器到移動(dòng)電話或其他移動(dòng)產(chǎn)品設(shè)備）上瀏覽時(shí)對(duì)應(yīng)不同分辨率皆有適合的呈現(xiàn)，減少用戶進(jìn)行縮放、平移和卷動(dòng)等操作行為。 對(duì)于網(wǎng)站設(shè)計(jì)師和前端工程師來(lái)說(shuō)，有別于過(guò)去需要針對(duì)各種設(shè)備進(jìn)行不同的設(shè)計(jì)，使用此種設(shè)計(jì)方式將更易于維護(hù)網(wǎng)頁(yè)。 此概念于2010年5月由國(guó)外著名網(wǎng)頁(yè)設(shè)計(jì)師Ethan Marcotte所提出。

采用RWD設(shè)計(jì)的網(wǎng)站使用CSS3 Media queries，即一種對(duì)@media規(guī)則的擴(kuò)充功能，以及基于比例的網(wǎng)格和自適應(yīng)大小的圖像以適應(yīng)不同大小的設(shè)備。

網(wǎng)格概念會(huì)要求頁(yè)面元素使用相對(duì)單位，如百分比或字型排版自動(dòng)調(diào)整大小，而不是像以前絕對(duì)的寬度及大小，如寬度為1024或768。

靈活的圖像也以相對(duì)單位調(diào)整大?。ㄗ畲蟮?100%），以防止它們超過(guò)網(wǎng)格，而顯示在包含它們的元素外面。

Media queries允許網(wǎng)頁(yè)根據(jù)訪問(wèn)站點(diǎn)設(shè)備的特點(diǎn)而使用不同 CSS 樣式規(guī)則，最常用的是瀏覽器的寬度。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)變得更加重要，因?yàn)橐苿?dòng)設(shè)備流量現(xiàn)在占互聯(lián)網(wǎng)流量的一半以上。 因此，Google宣布移動(dòng)設(shè)備時(shí)代的到來(lái)（Mobilegeddon）（2015年4月21日），并開(kāi)始提高移動(dòng)設(shè)備友好的網(wǎng)站的評(píng)價(jià)，并給予更好的推薦，譬如在手機(jī)上搜尋，有響應(yīng)式設(shè)計(jì)的網(wǎng)站可以優(yōu)先出現(xiàn)，而未有響應(yīng)式設(shè)計(jì)的網(wǎng)站，則可能不會(huì)出現(xiàn)在移動(dòng)設(shè)備的搜索結(jié)果，這迫使企業(yè)在這些年積極的升級(jí)網(wǎng)站為響應(yīng)式設(shè)計(jì)。

• 行動(dòng)上網(wǎng)流量已遠(yuǎn)超過(guò)電腦

  根據(jù)Yahoo 電商統(tǒng)計(jì)，商務(wù)來(lái)自移動(dòng)設(shè)備的流量高達(dá)60%，營(yíng)收達(dá)40%，遠(yuǎn)遠(yuǎn)超過(guò)電腦。 開(kāi)電腦是麻煩的，但隨時(shí)用手機(jī)或平板卻很方便，目前幾乎所有人都會(huì)用手機(jī)搜尋所需要的服務(wù)，如果你的網(wǎng)站在手機(jī)上還要縮放，造成消費(fèi)者的痛苦，消費(fèi)者會(huì)毫不留情的跳過(guò)。

• 移動(dòng)設(shè)備普及率70%

  移動(dòng)設(shè)備普及率高達(dá)七成資策會(huì)FIND公布最新調(diào)查結(jié)果顯示，國(guó)內(nèi)12歲以上使用智能型手機(jī)或平板電腦者已達(dá)到1604萬(wàn)人，約每4人便有3人為移動(dòng)設(shè)備用戶，比例還在增加中，由于行動(dòng)通訊的流行，現(xiàn)在連爺爺奶奶都已人手一機(jī)，若在都會(huì)區(qū)，比率則更高。

• 移動(dòng)設(shè)備使用率75%

  大多數(shù)人3/4以上時(shí)間都是使用移動(dòng)設(shè)備你不會(huì)帶著電腦到處跑，但卻是手機(jī)不離身，無(wú)論是用餐、喝咖啡、車上、餐廳、郊外、逛街、看電視、睡前時(shí)都離不開(kāi)手機(jī)。 只要有手機(jī)，都能隨時(shí)隨地上網(wǎng)、工作、拍照、分享，尤其是上廁所時(shí)，更是不能沒(méi)有手機(jī)。