原理：

主要是css根據(jù)屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁(yè)div顯示和布局，以適應(yīng)不同尺寸屏幕優(yōu)化瀏覽體驗(yàn)。

價(jià)值：

隨著越來(lái)越多的智能移動(dòng)設(shè)備（ mobile, tablet device ）加入到互聯(lián)網(wǎng)中來(lái)，移動(dòng)互聯(lián)網(wǎng)不再是獨(dú)立的小網(wǎng)絡(luò)，而是成為了 Internet 的重要組成部分。響應(yīng)式網(wǎng)絡(luò)設(shè)計(jì) （ RWD / AWD）的出現(xiàn)，目的是為移動(dòng)設(shè)備提供更好的體驗(yàn)，并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率，用技術(shù)來(lái)使網(wǎng)頁(yè)適應(yīng)不同分辨率的屏幕。

響應(yīng)式網(wǎng)站的制作難點(diǎn)

既然響應(yīng)式設(shè)計(jì)已成為大勢(shì)所趨？為什么國(guó)內(nèi)99.9999%的網(wǎng)站都還不是響應(yīng)式的？

• 設(shè)計(jì)原型多、兼容測(cè)試多

  制作前期，需要對(duì)用戶調(diào)研，確定制作多個(gè)尺寸線框原型界面，還需要設(shè)計(jì)師和前端開(kāi)發(fā)人員保持密切的溝通。

• 視覺(jué)設(shè)計(jì)要求高、細(xì)節(jié)多

  移動(dòng)設(shè)備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣，在設(shè)計(jì)的時(shí)候需要保證內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積等，都將對(duì)設(shè)計(jì)師有高要求。

• 前端實(shí)現(xiàn)難、跨技術(shù)合作

  與傳統(tǒng)的web開(kāi)發(fā)相比，響應(yīng)式設(shè)計(jì)的頁(yè)面由于頁(yè)面布局、內(nèi)容尺寸發(fā)生了變化，所以最終的產(chǎn)出更有可能與設(shè)計(jì)稿出入較大，需要前端開(kāi)發(fā)人員和設(shè)計(jì)師多溝通。

• 參與人員多、耗費(fèi)精力大

  因?yàn)轫憫?yīng)式設(shè)計(jì)需要對(duì)多個(gè)界面兼容、功能調(diào)試，導(dǎo)致整個(gè)制作過(guò)程需要UI設(shè)計(jì)師和前端工程師不斷磨合制作。

總的來(lái)說(shuō)，響應(yīng)式網(wǎng)頁(yè)不像傳統(tǒng)網(wǎng)頁(yè)只需考慮一種狀態(tài)，不是交付一套設(shè)計(jì)稿就完事兒了，它需要更多的人員參與到制作中來(lái)，它給設(shè)計(jì)、前端和開(kāi)發(fā)團(tuán)隊(duì)之間的協(xié)作模式帶來(lái)新的挑戰(zhàn)。在一個(gè)復(fù)雜產(chǎn)品全面響應(yīng)式的項(xiàng)目里，開(kāi)發(fā)人員在開(kāi)發(fā)之初就要設(shè)計(jì)好要適配的屏幕尺寸大小，頁(yè)面越復(fù)雜，要考慮的適配排版問(wèn)題就越多，而且交互每個(gè)階段該產(chǎn)出什么？交互與視覺(jué)如何協(xié)作？前端何時(shí)介入？哪些事情讓后端開(kāi)發(fā)來(lái)做更合理？一系列的配合制作難度，導(dǎo)致很多站長(zhǎng)望而生畏。