朱曉

摘要：在當(dāng)前數(shù)字革命時(shí)代，有不同屏幕的設(shè)備很多大小。 這為網(wǎng)頁開發(fā)增加了一層額外的復(fù)雜性。 網(wǎng)站現(xiàn)在必須在不同設(shè)備上呈現(xiàn)類似的體驗(yàn)。 解決這個(gè)問題，它需要一個(gè)設(shè)計(jì)解決方案。這個(gè)解決方案被稱為響應(yīng)式設(shè)計(jì)。

關(guān)鍵詞： 響應(yīng)式網(wǎng)站；媒體查詢；彈性布局；切換式推出型導(dǎo)航

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）04-0229-02

Analysis of the Developments of the Responsive Web Design

ZHU Xiao

（Shanghai Business and Information College，Shanghai 201700， China）

Abstract： In the current age of digital revolution， there are many devices with different screensizes. This increases an additional layer of complexity for web development. A webapplication now has to present a similar experience across different devices. To solvethis problem， it needs a design solution.This solution is termed as responsive design.

Key words： responsive website； media query； elastic layout； Switch type push type navigation

2010年，Ethan Marcotte首次發(fā)表了關(guān)于響應(yīng)式網(wǎng)站設(shè)計(jì)的文章。如其他新技術(shù)一樣，響應(yīng)式網(wǎng)站設(shè)計(jì)一開始并不被人接受，許多人不斷辯稱——甚至于現(xiàn)在某些人還在這么做——我們需要為手機(jī)單獨(dú)創(chuàng)建網(wǎng)站。但隨著今天市場(chǎng)上設(shè)備的激增，很明顯，我們不能依賴于一種手機(jī)模型并將其作為設(shè)計(jì)標(biāo)桿。我們的設(shè)計(jì)要能夠適應(yīng)所有設(shè)備，而這些設(shè)備的屏幕尺寸各不相同。

而與此同時(shí)，響應(yīng)式設(shè)計(jì)也在不斷發(fā)展。它不再僅僅是適應(yīng)屏幕尺寸，也能適應(yīng)不同的設(shè)備性能，如觸摸屏、視網(wǎng)膜顯示屏，以及慢速連接。我們有令人驚嘆的硬件設(shè)備，而響應(yīng)式設(shè)計(jì)能幫助我們充分利用各類設(shè)備。響應(yīng)式網(wǎng)站設(shè)計(jì)一開始只是設(shè)計(jì)簡(jiǎn)單的、注重內(nèi)容的站點(diǎn)（不依賴CSS或JavaScripi），使其能顯示在幾乎所有的聯(lián)網(wǎng)設(shè)備上。在此基礎(chǔ)之上，這種設(shè)計(jì)通過漸進(jìn)式增強(qiáng)——響應(yīng)式網(wǎng)站設(shè)計(jì)正是基于此——針對(duì)具體的顯示屏尺寸以及設(shè)備功能進(jìn)行優(yōu)化。因而，功能手機(jī)（也即功能有限的舊式手機(jī)）只能獲得那些它們能使用的內(nèi)容，而相對(duì)來說較新的智能設(shè)備所訪問的網(wǎng)站則具有豐富的設(shè)計(jì)、完美適配其屏幕的界面，設(shè)備功能被充分利用。響應(yīng)式網(wǎng)站設(shè)計(jì)使我們有能力為所有用戶呈現(xiàn)最好的網(wǎng)站，而不管他們具體使用什么設(shè)備。

1 彈性布局

網(wǎng)頁設(shè)計(jì)中的彈性布局是使用相對(duì)度量單位指定頁面的寬度。頁面內(nèi)容調(diào)整大小以適應(yīng)瀏覽器窗口顯示的大小或頁面上使用的字體。無論您的瀏覽器窗口多大，都應(yīng)調(diào)整大小以填充瀏覽器窗口。例如，如果您的瀏覽器窗口打開為1024像素的寬度，則右列應(yīng)該向右延伸至窗口的右側(cè)。展開瀏覽器窗口，使其現(xiàn)在變成1200像素寬，您將再次看到瀏覽器調(diào)整主要內(nèi)容以填充額外空間。在限制范圍內(nèi)，如果縮小窗口寬度，內(nèi)容也應(yīng)該縮小，以便您不必水平滾動(dòng)以閱讀文章。這樣的頁面布局被稱為“彈性”布局，其拉伸或縮小以根據(jù)其大小填充瀏覽器窗口。這種布局的其他名稱包括“液體”或“流體”布局，因?yàn)轫撁鏀U(kuò)展自身以便像液體擴(kuò)散一樣填充瀏覽器窗口的寬度，以便在灌注到容器中時(shí)填充整個(gè)表面。

彈性布局是通過使用em或百分比這樣的相對(duì)單位來完成的。 em基本上是在頁面上使用的字體的高度。它被認(rèn)為是相對(duì)的，因?yàn)?6點(diǎn)字體與12點(diǎn)字體有不同的高度。百分比具有你習(xí)慣數(shù)學(xué)的正常含義。也就是說，如果頁面的寬度設(shè)置為80%，則意味著它可以具有的最大寬度的80%。它被認(rèn)為是相對(duì)的，因?yàn)樽畲髮挾热Q于瀏覽器窗口的大小。

2 媒體查詢

網(wǎng)頁設(shè)計(jì)重拾流式布局的理念，使用基于百分比的寬度，并設(shè)法讓其成為一種適用于小型移動(dòng)設(shè)備的解決方案。使用百分比而不是像素使得網(wǎng)頁及頁面各部分都能夠自動(dòng)改變寬度來適應(yīng)任意屏幕尺寸，因此也就很容易地消除了相似尺寸設(shè)備之間的差異。但是一旦你縱觀所有的設(shè)備，就會(huì)有這樣一個(gè)問題。如果要縮窄三欄的布局以應(yīng)用于智能手機(jī)的屏幕寬度，那么各欄中的文本會(huì)變得窄而長(zhǎng)，難以閱讀。同樣，單欄布局在智能手機(jī)屏幕上看起來是蠻好的，但要想在桌面顯示器上輕松閱讀則顯得太寬了。

本質(zhì)上，這個(gè)問題是：不創(chuàng)建多個(gè)單獨(dú)的站點(diǎn)，如何使一個(gè)網(wǎng)站能夠在窄屏上以單欄顯示，而在大屏上以多欄顯示？如何根據(jù)瀏覽網(wǎng)站的設(shè)備的特性來要瀏覽器變換網(wǎng)頁的布局？這就需要媒體查詢。CSS的@media規(guī)則允許你根據(jù)設(shè)備特性而顯示不同的CSS樣式，這實(shí)際上在十多年前的CSS2中就有了，但當(dāng)時(shí)它只支持查詢媒體的類型，這通常只能用于為網(wǎng)站設(shè)計(jì)創(chuàng)建一個(gè)打印版。直到CSS3對(duì)媒體查詢制定了規(guī)范，才能夠基于媒體（設(shè)備）的寬度、高度和色彩性能等特性執(zhí)行更精確的查詢。媒體查詢不影響HTML，只影響使用CSS后應(yīng)用到頁面的樣式。瀏覽器在2009年前后開始支持CSS3媒體查詢。媒體查詢可以做什么呢？舉個(gè)基本的例子，假設(shè)我們有一個(gè)網(wǎng)站，有兩塊各自獨(dú)立的內(nèi)容。我們可以創(chuàng)建一個(gè)很適合智能手機(jī)的單欄設(shè)計(jì)，以垂直堆疊的方式顯示兩塊內(nèi)容。而在更寬的屏幕上，我們可能想要以并排的兩欄來顯示這兩塊內(nèi)容。

使用媒體查詢，我們可以詢問設(shè)備屏幕有多寬，然后告訴瀏覽器僅在屏幕具有足夠?qū)挾葧r(shí)，才以兩欄來顯示內(nèi)容。要用代碼來實(shí)現(xiàn)這種效果，我們?cè)陂_始只是用CSS將內(nèi)容顯示在一欄中，然后再添加一條CSS媒體查詢，詢問屏幕寬度是否大干等于40 em。之后我們會(huì)在這條媒體查詢中添加CSS樣式將內(nèi)容顯示在兩欄中。瀏覽器僅在該媒體查詢結(jié)果為真時(shí)（即如果屏幕寬度大干等于40em）才使用此CSS樣式。如果屏幕寬度小于40em，它會(huì)忽略此CSS樣式，內(nèi)容保持在一欄中。因此，我們可以針對(duì)不同的屏幕尺寸使網(wǎng)站變換為不同的布局，而無需創(chuàng)建單獨(dú)的網(wǎng)站。

通過使用媒體查詢，我們可以隨心所欲地改變網(wǎng)站的樣式，不僅僅是欄數(shù)。媒體查詢可以移動(dòng)內(nèi)容，改變文字的大小，隱藏或顯示內(nèi)容塊，調(diào)整邊距和空白，以及調(diào)整其他的CSS樣式。

3 響應(yīng)式框架

隨著響應(yīng)式網(wǎng)頁的興起，各種響應(yīng)式框架遍接連涌出，它們的出現(xiàn)提高的網(wǎng)頁設(shè)計(jì)師的工作效率，能更好的使得網(wǎng)頁設(shè)計(jì)師專注于網(wǎng)站個(gè)性化的開發(fā)工作。

筆者在此以目前最為流行的Bootstrap為例，簡(jiǎn)單介紹框架的使用的原理。

Bootstrap前身是Twitter Bootstrap，它是一個(gè)完全基于響應(yīng)式的框架，通過其提供的文件可以快速的部署一個(gè)響應(yīng)式網(wǎng)站。首先，引入bootstrap.css和bootstrap-responsive.css兩個(gè)css文件，然后引入jquery-latest.min.js和bootstrap.css兩個(gè)js文件。

在網(wǎng)頁中，需要先添加一個(gè)css類為container的div標(biāo)簽，它是用于控制其子元素響應(yīng)式寬度的可以重復(fù)使用的布局元素。然后在contain中添加一個(gè)類為hero-unit的div。Bootstrap使用row類來控制div的寬度，在這行中，可以把網(wǎng)頁分成12列。bootstrap的響應(yīng)式菜單是放在頂部的button類，它是個(gè)響應(yīng)式元素，只會(huì)顯示在寬度較窄的手機(jī)版網(wǎng)頁中，當(dāng)該元素被單擊的時(shí)候，會(huì)顯示其移動(dòng)版的菜單欄目nav-collapse，當(dāng)然這還需要使用一些javascript技術(shù)來實(shí)現(xiàn)按鈕的操作?？蚣芴峁┑牟季謺?huì)自適應(yīng)各類設(shè)備，每行中的內(nèi)容都會(huì)占據(jù)特定的列寬，在移動(dòng)設(shè)備中為縮小為單列，便于移動(dòng)用戶瀏覽。Bootstrap還有其他功能，包括動(dòng)畫特性等，由于篇幅有限，不再展開介紹。

4 響應(yīng)式設(shè)計(jì)的實(shí)際應(yīng)用

響應(yīng)式并不是完美的，但是經(jīng)過時(shí)間檢驗(yàn)和網(wǎng)頁設(shè)計(jì)師們的完成，已經(jīng)趨向成熟和完善。國(guó)外IT巨頭率先嘗試響應(yīng)式網(wǎng)頁設(shè)計(jì)，如：Apple，IBM，HP ，Google， You Tube， microsoft都先后采用響應(yīng)式網(wǎng)頁技術(shù)對(duì)自己的網(wǎng)站進(jìn)行了改版。而在國(guó)內(nèi)，如華為、三星中國(guó)、微軟中國(guó)等業(yè)界巨頭也采用了響應(yīng)式網(wǎng)站設(shè)計(jì)。然而，像京東、淘寶等大型網(wǎng)站并沒有采用響應(yīng)式網(wǎng)站設(shè)計(jì)。其原因是響應(yīng)式設(shè)計(jì)并不適合所有網(wǎng)站。

使用響應(yīng)式設(shè)計(jì)最有說服力的理由是，你創(chuàng)建的網(wǎng)站不僅在現(xiàn)今市場(chǎng)上的各種設(shè)備上都能正確地工作并有良好的顯示效果，而且很可能在將來出現(xiàn)的那些新設(shè)備上也能如此。此外，使用響應(yīng)式設(shè)計(jì)，你不會(huì)冒用戶可能在桌面顯示器上瀏覽移動(dòng)版站點(diǎn)的風(fēng)險(xiǎn)，同時(shí)，一個(gè)網(wǎng)站更易于管理：從開發(fā)人員的角度來看，為不同的設(shè)備管理單個(gè)代碼庫更容易。用戶會(huì)有更好的體驗(yàn)，使用響應(yīng)式設(shè)計(jì)，可以展現(xiàn)更好的內(nèi)容，包含使用適當(dāng)?shù)膱D像。

反之亦然。如果你有多個(gè)獨(dú)立的站點(diǎn)，那這無疑會(huì)成為一個(gè)問題，無論你是通過設(shè)備檢測(cè)來發(fā)送正確版本的站點(diǎn)給每個(gè)設(shè)備，還是使用一組單獨(dú)的URL（比如一個(gè)m-dot子域名）供移動(dòng)版網(wǎng)站使用。如果網(wǎng)站有一個(gè)單獨(dú)的移動(dòng)版本，通常會(huì)使用設(shè)備檢測(cè)（其發(fā)生在網(wǎng)站服務(wù)器，且在頁面顯示之前）來確定應(yīng)該將哪個(gè)版本的網(wǎng)頁：移動(dòng)版或桌面版發(fā)送給任一特定的設(shè)備。這樣，站點(diǎn)中的每個(gè)頁面雖然只有一個(gè)URL，但實(shí)際上存在兩個(gè)不同版本的HTML頁面。

同樣，響應(yīng)式網(wǎng)頁也有自身的缺陷，為了兼容各種瀏覽器，響應(yīng)式設(shè)計(jì)會(huì)有很多的冗余代碼，也就是所謂hack。另外將一個(gè)功能豐富、結(jié)構(gòu)繁雜的電商平臺(tái)改成響應(yīng)式網(wǎng)頁也是不合理的。不僅如此，將大量?jī)?nèi)容顯示在手機(jī)上也是影響手機(jī)訪問速度。所以，復(fù)雜的頁面不太適合響應(yīng)式網(wǎng)頁設(shè)計(jì)方案。隨著WINDOWS XP逐漸退出歷史舞臺(tái)，IE9+瀏覽器和以webkit為核心的瀏覽器（如chrome，360極速，獵豹，搜狗，qq，百度瀏覽器等）已經(jīng)占據(jù)瀏覽器絕大部分市場(chǎng)份額。越來越多的網(wǎng)站選擇成為響應(yīng)式。

5 結(jié)束語

響應(yīng)式網(wǎng)頁設(shè)計(jì)從誕生開始，一路走來，經(jīng)過了諸多國(guó)內(nèi)外設(shè)計(jì)師的努力，已經(jīng)逐漸完善。另外，隨之w3c對(duì)瀏覽器標(biāo)準(zhǔn)的一次次更新，微軟ie瀏覽器也愈發(fā)向著標(biāo)準(zhǔn)看齊，使得響應(yīng)式網(wǎng)頁設(shè)計(jì)在國(guó)內(nèi)也開始變得活躍起來。本文介紹了響應(yīng)式網(wǎng)頁設(shè)計(jì)的關(guān)鍵技術(shù)，并闡述了響應(yīng)式布局的優(yōu)缺點(diǎn)和國(guó)內(nèi)外的發(fā)展情況。

參考文獻(xiàn)：

[1] Ethan Marcotte.移動(dòng)優(yōu)先與響應(yīng)式Web 設(shè)計(jì)[M].司徒卓恒，譯.人民郵電出版社，2014.

[2] 吉倫沃特.靈活Web 設(shè)計(jì)[M].李靜，等，譯.機(jī)械工業(yè)出版社，2009.

[3] Ben Frain.響應(yīng)式Web 設(shè)計(jì)———HTML5 和CSS3 實(shí)戰(zhàn)[M]. 王永強(qiáng)，譯. 人民郵電出版社，2013.

[4] 張賀，陳錦昌.基于響應(yīng)式的移動(dòng)門戶網(wǎng)站構(gòu)建[J].現(xiàn)代計(jì)算機(jī)，2015（4）：68- 71.

[5] 謝輝，等.基于響應(yīng)式Web 的農(nóng)業(yè)網(wǎng)站設(shè)計(jì)方法研究[J].安徽農(nóng)業(yè)科學(xué)，2016（2）：330-334.

[6] 吳多智，陳益全.響應(yīng)式網(wǎng)頁設(shè)計(jì)案例實(shí)現(xiàn)與分析[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016（2） .

[7] 張坤.響應(yīng)式設(shè)計(jì)分析及其與web 應(yīng)用程序的對(duì)比研究[J].攀枝花學(xué)院學(xué)報(bào)， 2016（2）：29-31.

[8] 胡佳鋒.新媒體Web 技術(shù)的研究與實(shí)現(xiàn)[D].北京： 中國(guó)地質(zhì)大學(xué)，2016.