進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代，各種不同的移動(dòng)智能設(shè)備層出不窮，比如說(shuō)智能手機(jī)、平板電腦、可穿戴式設(shè)備等。據(jù)2017年8月第40次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》的統(tǒng)計(jì)結(jié)果，截至2017年6月，我國(guó)網(wǎng)民規(guī)模達(dá)到7.51億，其中手機(jī)網(wǎng)民達(dá)7.24億，占比達(dá)96.3%，較2016年底增長(zhǎng)了1.2個(gè)百分點(diǎn)，與此同時(shí)，使用臺(tái)式電腦、筆記本電腦等終端上網(wǎng)的比例卻有所下滑。這意味著網(wǎng)民的上網(wǎng)設(shè)備進(jìn)一步向移動(dòng)端集中，移動(dòng)互聯(lián)網(wǎng)主導(dǎo)地位進(jìn)一步強(qiáng)化。但各種不同的移動(dòng)智能終端設(shè)備的屏幕大小和分辨率都是不盡相同的，而且即使是同一個(gè)設(shè)備，當(dāng)用戶(hù)旋轉(zhuǎn)屏幕時(shí)，縱向和橫向查看的屏幕尺寸也會(huì)有差異，所以如何使網(wǎng)頁(yè)在不同的設(shè)備和不同的屏幕分辨率下都能達(dá)到理想的顯示效果，使得用戶(hù)不管通過(guò)什么終端都能達(dá)到理想的瀏覽和使用體驗(yàn)，是新型的網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)技術(shù)所要達(dá)到的需求。顯然，傳統(tǒng)固定布局的方式已經(jīng)無(wú)法滿(mǎn)足這種需求了，因此，現(xiàn)在越來(lái)越多的網(wǎng)站都已經(jīng)開(kāi)始采用響應(yīng)式的思想來(lái)設(shè)計(jì)與開(kāi)發(fā)網(wǎng)頁(yè)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為當(dāng)今網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)的新潮流。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的產(chǎn)生

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，全稱(chēng)是Responsive Web Design，最早是由伊桑·馬卡特（Ethan Marcotte）在2010年提出的一個(gè)概念，最主要的動(dòng)機(jī)是“如何使得頁(yè)面布局適應(yīng)任何的瀏覽窗口”。響應(yīng)式頁(yè)面的設(shè)計(jì)理念是，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)能夠根據(jù)用戶(hù)的行為以及設(shè)備環(huán)境（包括系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，也就是頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶(hù)的設(shè)備環(huán)境。簡(jiǎn)而言之，這個(gè)概念指的就是網(wǎng)站的頁(yè)面能夠兼容多種不同的終端，根據(jù)不同的環(huán)境做出自動(dòng)的響應(yīng)及調(diào)整。

響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)的實(shí)現(xiàn)方案有很多，包括CSS媒體查詢(xún)的使用、彈性網(wǎng)格和布局、流式圖像等。無(wú)論用戶(hù)使用的是哪種設(shè)備，響應(yīng)式頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以實(shí)現(xiàn)自動(dòng)的適應(yīng)。

伊桑·馬卡特在其個(gè)人網(wǎng)站上給出了響應(yīng)式網(wǎng)頁(yè)的簡(jiǎn)單示例。這個(gè)網(wǎng)站雖然簡(jiǎn)單，卻具備了響應(yīng)式網(wǎng)頁(yè)的要素：自動(dòng)適應(yīng)、流式網(wǎng)格布局、流式圖像顯示等等。讀者可以嘗試瀏覽這個(gè)網(wǎng)頁(yè)，通過(guò)手動(dòng)拖動(dòng)鼠標(biāo)改變?yōu)g覽器窗口的大小，查看在不同瀏覽器窗口尺寸下頁(yè)面顯示的變化。可以看到，在不同的瀏覽器窗口尺寸下，網(wǎng)頁(yè)的地址沒(méi)有發(fā)生變化，但網(wǎng)頁(yè)的布局顯示卻可能有所改變，如圖所示。

響應(yīng)式和“自適應(yīng)網(wǎng)頁(yè)”

提到響應(yīng)式網(wǎng)頁(yè)，不得不提的就是另一個(gè)“自適應(yīng)網(wǎng)頁(yè)”的概念了。初學(xué)者對(duì)于這兩個(gè)概念往往容易混淆。響應(yīng)式網(wǎng)頁(yè)具有自適應(yīng)的特性，是指頁(yè)面能自動(dòng)響應(yīng)及適配用戶(hù)的設(shè)備環(huán)境，但平常所說(shuō)的“自適應(yīng)網(wǎng)頁(yè)”是否就是響應(yīng)式網(wǎng)頁(yè)呢？

答案是否定的。適配不同瀏覽環(huán)境的技術(shù)有很多，而傳統(tǒng)意義上的“自適應(yīng)網(wǎng)頁(yè)”雖然也可以針對(duì)不同的瀏覽環(huán)境做出自動(dòng)調(diào)整，但其使用的并不一定是響應(yīng)式網(wǎng)頁(yè)的技術(shù)。比如早期的一些網(wǎng)站或現(xiàn)在一些門(mén)戶(hù)網(wǎng)站的首頁(yè)，可以根據(jù)檢測(cè)到的不同的客戶(hù)端而提供不同的瀏覽網(wǎng)頁(yè)，比如專(zhuān)門(mén)提供一個(gè)Android的版本，或者一個(gè)iPhone / iPad的版本等，這也是實(shí)現(xiàn)網(wǎng)站兼容不同終端的其中一種做法。我們往往可以看到一些“自適應(yīng)”網(wǎng)站的首頁(yè)，用PC端瀏覽時(shí)訪(fǎng)問(wèn)的是類(lèi)似“www.xxx.com”的地址，而使用移動(dòng)設(shè)備訪(fǎng)問(wèn)的是類(lèi)似“m.xxx.com”的地址，可見(jiàn)打開(kāi)的并非同一個(gè)網(wǎng)頁(yè)。事實(shí)上這種做法同時(shí)提供了多個(gè)不同的網(wǎng)頁(yè)，好處是可以極大地保證不同環(huán)境下的顯示效果，但是缺點(diǎn)也非常明顯，就是在網(wǎng)站維護(hù)時(shí)需要同時(shí)兼顧多個(gè)不同版本的網(wǎng)頁(yè)，而且維護(hù)的工作將會(huì)呈幾何級(jí)數(shù)上升。假如這個(gè)網(wǎng)站有多個(gè)入口，還會(huì)大大地增加架構(gòu)設(shè)計(jì)的復(fù)雜度。所以，這種使用不同頁(yè)面來(lái)適配瀏覽條件的方式，往往比較多見(jiàn)于網(wǎng)站的首頁(yè)，因?yàn)槿绻W(wǎng)站的所有內(nèi)容頁(yè)都采用這種方式，這個(gè)網(wǎng)站的結(jié)構(gòu)將會(huì)變得非常臃腫。而類(lèi)似這種跳轉(zhuǎn)到不同地址、打開(kāi)不同網(wǎng)頁(yè)的適配方式，并不能稱(chēng)為真正的響應(yīng)式網(wǎng)頁(yè)，只能叫作“自適應(yīng)”的。

響應(yīng)式網(wǎng)頁(yè)的特點(diǎn)

響應(yīng)式網(wǎng)頁(yè)的核心思想，在于“一次設(shè)計(jì)，普遍適用”，強(qiáng)調(diào)的是讓同一個(gè)地址的同一個(gè)網(wǎng)頁(yè)自動(dòng)地去適應(yīng)不同的顯示環(huán)境，并且能夠根據(jù)屏幕的設(shè)置和布局需要，來(lái)自動(dòng)調(diào)整網(wǎng)頁(yè)內(nèi)容的顯示。而響應(yīng)式的網(wǎng)站，不管使用什么設(shè)備，打開(kāi)及顯示的都是同一個(gè)地址、同一個(gè)網(wǎng)頁(yè)，只是這個(gè)網(wǎng)頁(yè)可以通過(guò)自動(dòng)地識(shí)別屏幕寬度，對(duì)不同的使用環(huán)境做出相應(yīng)的自動(dòng)調(diào)整，從而造成網(wǎng)頁(yè)的布局和內(nèi)容展示在不同環(huán)境下時(shí)可能會(huì)有所不同。

開(kāi)發(fā)響應(yīng)式網(wǎng)頁(yè)時(shí)，首先我們需要改變一下以往的觀念，在開(kāi)發(fā)時(shí)“以移動(dòng)設(shè)備優(yōu)先”。為什么要選擇移動(dòng)優(yōu)先呢？第一個(gè)原因就是現(xiàn)在移動(dòng)設(shè)備的使用率越來(lái)越高，而且隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，移動(dòng)端的應(yīng)用將成為重點(diǎn)。

還有基于網(wǎng)站開(kāi)發(fā)流程方面的考慮。打個(gè)比方，想象一下我們搬家的時(shí)候，如果我們要把所有的東西從一個(gè)大房子搬到一個(gè)小房子，那么很有可能空間會(huì)比以前擁擠，而且如果東西太多放不下，可能要不得不舍棄掉一些東西，這種“舍棄”有時(shí)會(huì)是一個(gè)很艱難的決定。但是如果反過(guò)來(lái)，從一個(gè)小房子搬到一個(gè)大房子，那么空間會(huì)寬松很多。同樣的道理，移動(dòng)端稍微偏小的屏幕尺寸會(huì)使得空間比較受限，那么就要求我們?cè)谠O(shè)計(jì)時(shí)考慮把最重要的內(nèi)容優(yōu)先加載和展示，這樣，即使后面遷移到較大的屏幕，也可以保證整體的結(jié)構(gòu)不會(huì)受到破壞，也許為了頁(yè)面的美觀可能需要增加一些內(nèi)容，但畢竟做加法會(huì)比做減法容易得多。而且由于大小、帶寬等限制，移動(dòng)網(wǎng)頁(yè)的設(shè)計(jì)絕大部分應(yīng)該是內(nèi)容性的設(shè)計(jì)，移動(dòng)優(yōu)先原則下提高用戶(hù)體驗(yàn)的一大法寶，就是“把最重要的東西放在最顯眼的地方”。

在這里給出響應(yīng)式網(wǎng)頁(yè)的一些特點(diǎn)：

（1）媒體查詢(xún)技術(shù)（Media Query）。響應(yīng)式網(wǎng)頁(yè)往往包含多個(gè)媒體查詢(xún)語(yǔ)句，用于適配不同的顯示條件。

（2）流式網(wǎng)格布局（Fluid Grid Layout）。讓網(wǎng)頁(yè)元素來(lái)決定網(wǎng)格的大小和設(shè)計(jì)，并根據(jù)網(wǎng)頁(yè)元素來(lái)決定所占用的網(wǎng)格位置尺寸。

（3）靈活的多媒體顯示（Flexible Media）。根據(jù)不同設(shè)備、不同分辨率、不同網(wǎng)速等環(huán)境，來(lái)自動(dòng)適配多媒體內(nèi)容的顯示。比如可以讓同一個(gè)圖像，在iPhone 6上顯示“高清”的版本，而在iPhone 4上只顯示“一般”的版本。

（4）高性能的JavaScript腳本。由于有些用戶(hù)終端的運(yùn)行條件有限，響應(yīng)式網(wǎng)頁(yè)里的腳本肯定要考慮運(yùn)行效率的問(wèn)題。現(xiàn)在已有一些較成熟的JavaScript框架，比如jQuery等，能大大改進(jìn)腳本程序的運(yùn)行性能和效率。

最后歡迎大家添加我們的前端技術(shù)分享交流qq群：791201477  或者  857920838  加群之后找群管理要前端相關(guān)學(xué)習(xí)資料和學(xué)習(xí)視頻即可，等你來(lái)哦~~~