最近很多(duō)客戶咨詢我們是否可(kě)以提供響應式網站建設服務，以及響應式網站的(de)優缺點等等。這(zhè)裏蜀美(měi)想說，蜀美(měi)可(kě)以爲客戶提供響應式網站建設服務，但前提是您需要知道每一種技術都有其特定的(de)局限，以及其特有的(de)優勢，對(duì)于一些客戶認爲響應式網站等于一切的(de)客戶，蜀美(měi)特地分(fēn)享了(le)一篇關于響應式的(de)文章(zhāng)供大(dà)家閱覽。

你調整了(le)浏覽器，笑(xiào)容攀上臉頰。你感到非常開心，認爲自己實現了(le)友好移動的(de)目标。在正式討(tǎo)論前，讓我來(lái)預測下(xià)未來(lái)：你會失掉用(yòng)戶和(hé)經濟效益，如果你把響應式網頁作爲唯一目标和(hé)唯一的(de)解決辦法。好消息是，你可(kě)以行之有效。

在這(zhè)篇文章(zhāng)中，我們會談到移動互聯網和(hé)響應式設計的(de)關系，首先将介紹如何巧妙的(de)運用(yòng)響應式設計，爲什(shén)麽性能對(duì)移動端非常重要，爲什(shén)麽響應式設計不能最爲你網站的(de)目标，最後技術的(de)性能問題幫助我們更好的(de)理(lǐ)解這(zhè)問題。

自2000年開始，設計者和(hé)開發者就把移動設備的(de)問題過于簡單化(huà)，以至于現在仍然有人(rén)認爲響應式網頁設計能解決一切問題。

大(dà)家必須明(míng)白，淩駕于與任何目标，移動網絡體驗必須和(hé)閃電一樣快(kuài)。迅速、實用(yòng)、兼容的(de)體驗對(duì)所有移動設備都是挑戰。當你使用(yòng)響應式設計時(shí)，這(zhè)些挑戰都存在。從一開始就重視性能會讓過程容易些。

響應式設計是很棒，但不是萬能鑰匙。如果你在移動設備上一味堅持，在轉換率後就可(kě)能隐藏著(zhe)性能問題。大(dà)約有11%的(de)網站是響應式，這(zhè)個(gè)數字每月(yuè)都在增長(cháng)，所以現在是談論這(zhè)個(gè)問題的(de)時(shí)機了(le)。

據Guy Podjarny研究，72%的(de)響應式網站不分(fēn)屏幕大(dà)小都提供相同的(de)字節，盡管這(zhè)會降低移動網絡連接。不是所有用(yòng)戶都有耐心等著(zhe)網站加載。

對(duì)響應式設計存在的(de)問題有了(le)基本認識，我們就能減低它帶來(lái)的(de)損失。

移動網站來(lái)自過去

我不是說你不應該采用(yòng)響應式設計或者去用(yòng)m.*的(de)子域名。事實上，現在社會分(fēn)享無處不在，不分(fēn)設備，分(fēn)配給給文檔一個(gè)URL，這(zhè)是聰明(míng)的(de)做(zuò)法。但這(zhè)并不意味著(zhe)一個(gè)單獨URL應該提供相同的(de)文檔或每一個(gè)設備都應該下(xià)載相同的(de)資源。

援引Ethan Marcotte的(de)話(huà)，他(tā)創造了(le)“響應式網頁設計”這(zhè)個(gè)術語。

最重要的(de)是，響應式網頁設計的(de)初衷不是要取代移動網頁。——Ethan Marcotte

交互、移動、快(kuài)速

如果我們能使用(yòng)一些其他(tā)的(de)技術，就可(kě)以實現獲得(de)響應式設計好處的(de)同時(shí)，不影(yǐng)響移動設備的(de)性能。響應式設計從來(lái)不是意味著(zhe)要解決“性能”，這(zhè)也(yě)是爲什(shén)麽我們不能因此指責它的(de)原因。然而，相信它能解決你所有問題，這(zhè)大(dà)錯特錯。

設計響應式很重要，因爲我們需要解決跨桌面和(hé)移動端視窗(chuāng)大(dà)小範圍的(de)問題。但是隻考慮屏幕大(dà)小就低估了(le)移動設備。桌面和(hé)移動端的(de)界限正在變得(de)模糊，基于不同的(de)設備對(duì)我們而言仍然有多(duō)種可(kě)能性。但是我們還(hái)不能通(tōng)過媒體查詢來(lái)決定響應式設計的(de)功能。一些評論家稱之爲“可(kě)靠的(de)響應式網頁設計”，然而另一些人(rén)則認爲它是伴随現代視覺的(de)響應式網頁設計。在沒有了(le)解其基本語義的(de)情況下(xià)，我們需要搞清楚這(zhè)個(gè)問題。

雖然沒有可(kě)應用(yòng)于各類文檔的(de)萬全之策，但是能夠運用(yòng)一些技巧來(lái)改善現有響應式的(de)解決辦法，并且力求性能最大(dà)化(huà)。

· 實現每一個(gè)文檔對(duì)所有的(de)設備都使用(yòng)相同的(de)URL和(hé)相同的(de)内容，結構不必要相同。

· 當從零開始，遵循“移動先行”的(de)方法。

· 在一個(gè)真實設備上測試當資源加載和(hé)顯示會發生什(shén)麽。不要依賴調整你的(de)桌面浏覽器。

· 使用(yòng)優化(huà)工具測量和(hé)提高(gāo)性能。

· 通(tōng)過JavaScript傳輸響應圖片，雖然我們更期盼著(zhe)浏覽器供應商（例如srcset）能解決這(zhè)個(gè)問題

· 當你需要當前設備具備加載條件時(shí)，隻加載JavaScript，這(zhè)會在onload事件之後發生。

· 對(duì)移動設備，内聯文檔的(de)原始視圖，或者發送一屏顯示内容。

· 使用(yòng)下(xià)面一種或幾種技術應用(yòng)智能響應式的(de)解決方案：條件加載、按組響應、服務器端層（如适應性方法）。

條件加載

不要總是在CSS中依賴media queries，因爲浏覽器将會爲所有設備加載和(hé)解析所有選擇器和(hé)樣式 (後面詳細討(tǎo)論)。這(zhè)就意味著(zhe)手機爲了(le)一個(gè)大(dà)屏要下(xià)載和(hé)解析CSS。因爲CSS塊的(de)呈現，你要浪費一些時(shí)間等待聯接成功。

在設備上用(yòng)JavaScript的(de)matchMedia查詢來(lái)代替CSS media queries,你知道這(zhè)些内容是不會變化(huà)的(de)。例如，大(dà)家都知道iphone不能動态的(de)轉換成iPad的(de)規格，所以我們隻在正在需要CSS時(shí)才用(yòng)。

可(kě)以用(yòng)特征檢測，例如 Modernizr，對(duì)UI和(hé)功能性做(zuò)出更明(míng)智的(de)決定而不是僅僅根據屏幕尺寸。

按組響應

在處理(lǐ)簡單文檔、爲台式電腦(nǎo)和(hé)智能手機提供相同的(de)HTML時(shí)，雖然爲我們可(kě)以讓所有屏幕依賴一個(gè)單一的(de)HTML基礎和(hé)響應式設計，但這(zhè)并不總是最好的(de)解決方案。爲什(shén)麽呢(ne)？同樣是由于移動設備的(de)性能。

即使我們在服務器端儲存相同的(de)文檔，但是根據設備組别的(de)不同給用(yòng)戶不同的(de)文檔。舉個(gè)例子，爲一個(gè)6英寸甚至更大(dà)的(de)屏幕提供大(dà)的(de)浮動菜單，爲一個(gè)小屏幕提供漢堡菜單。在每個(gè)組群裏，使用(yòng)響應時(shí)技術以适應不同的(de)場(chǎng)景，例如肖像模式和(hé)風景模式的(de)轉換，切換iPhone（320像素寬）、5英寸Android設備（360英寸）和(hé)平闆（400像素）。

服務器端層

智能響應策略的(de)最後一個(gè)選擇是服務器。服務器端功能檢測和(hé)決策不是移動網絡的(de)新鮮玩意。類似 WURFL 和(hé)Device Atlas的(de)庫在市場(chǎng)上有好多(duō)年，響應式設計和(hé)服務器組件的(de)混合也(yě)衆所周知。有時(shí)被稱爲是響應式設計和(hé)服務器端組件（RESS）,有時(shí)又叫自适應設計，這(zhè)提高(gāo)了(le)響應式設計的(de)速度和(hé)可(kě)用(yòng)性，同時(shí)每一個(gè)服務器端都保持一個(gè)代碼庫。很遺憾的(de)是。這(zhè)些技術這(zhè)幾年并沒有什(shén)麽突破性的(de)發展。隻能在博客和(hé)雜(zá)志裏看到一些開發者對(duì)“RESS”、“響應式”、“自适應”做(zuò)比較。原因就是：我們是前端專業人(rén)士。任何涉及到服務器的(de)事情看起來(lái)都是不太愉快(kuài)的(de)問題。在一些情況下(xià)，前端設計師能把握好服務器的(de)腳本，另一些情況是，服務器由遠(yuǎn)程開發團隊管理(lǐ)，設計師不想每做(zuò)一次小的(de)UI改變就要和(hé)遠(yuǎn)程團隊溝通(tōng)處理(lǐ)。我能體會這(zhè)種感覺。

這(zhè)就是在大(dà)型項目中要花時(shí)間思考新架構層的(de)原因，這(zhè)樣前端工程師對(duì)服務器做(zuò)決定時(shí)不會影(yǐng)響到後端架構。Node.js是一個(gè)極好的(de)備選平台，是介于當前企業後端基礎和(hé)前端之間的(de)服務器端層。

在這(zhè)個(gè)新的(de)端層裏，前端的(de)工程師可(kě)以根據有現實的(de)決定權，這(zhè)會使得(de)在不觸及後端架構的(de)情況下(xià)，讓所有設備上的(de)體驗更爲快(kuài)速、響應、可(kě)用(yòng)。