都說前端坑多，這不，最近只是想研究viewport，卻產(chǎn)生了N多問題：

• 寬度單位我是用百分比還是em？還是rem？區(qū)別呢？絕對(duì)長度單位？相對(duì)長度單位？
• px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……這些有什么區(qū)別？他們之間如何轉(zhuǎn)化計(jì)算的？
• 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設(shè)備像素、css像素？ 瀏覽器窗口大小和設(shè)備大小和分辨率大小啥區(qū)別啊？
• 如果做移動(dòng)適配，到底我應(yīng)該按照多大尺寸制作？320、640還是720？
• 如果我按640的尺寸重構(gòu)后，是不是還需要再做其他尺寸來適配不同大小的屏幕？
• 為什么我要按照640的大小來設(shè)計(jì)頁面而不是其他尺寸？
• 做移動(dòng)端適配，如果我按給元素賦予固定的像素值640，但為什么在不同的手機(jī)里看起來都差不多，不需要另外去適配？
• viewport又是什么？media媒體查詢又是什么？js判斷又是什么？三者區(qū)別？
• 寫一個(gè)css還是寫多個(gè)css？
• 什么是響應(yīng)式網(wǎng)站，自適應(yīng)又是什么鬼？兩者有何卻別和聯(lián)系？百分比寬度布局和流式布局和前者的關(guān)系？
• 既然響應(yīng)式這么流行，為何大的網(wǎng)站淘寶、百度等沒有去做，而是單純開發(fā)了一個(gè)移動(dòng)站？這里面有那些坑需要避開？

好了，上面是我們的問題，雖然心情復(fù)雜，但我們還是從最基礎(chǔ)的來捋一捋吧。

什么是響應(yīng)式網(wǎng)站，自適應(yīng)網(wǎng)站？兩者有何卻別和聯(lián)系？百分比寬度和流式布局和前者有何關(guān)系？

• 歷史發(fā)展：

在很早之前，我們上網(wǎng)設(shè)備還不多，屏幕也不多，顯示器分辨率也就那幾個(gè)。那個(gè)時(shí)候，我們的網(wǎng)站幾乎都設(shè)計(jì)的是固定寬度的尺寸，比如最多見的就是800px、850px、960px。這樣本沒有問題，也少有人在人電腦還未普及的時(shí)代去考慮手機(jī)的問題，至少那不是個(gè)主要矛盾的點(diǎn)。后來隨著個(gè)人筆記本普及，上網(wǎng)設(shè)備增多，顯示器分辨率也越來越多，這時(shí)候，這種固定寬度的頁面問題就凸顯了，有的pc分辨率都能達(dá)到2000像素了，再用960的，看上去就顯得很小，這只是其中一個(gè)問題，如果把寬固定寫死了，那對(duì)于筆記本用戶來說又是問題，筆記本的分辨率那時(shí)落后pc的，如果用戶主動(dòng)縮小窗口，或筆記本分辨率太低，那么窗口縮小后內(nèi)容就會(huì)被遮擋住，還會(huì)出現(xiàn)橫向滾動(dòng)條，拖動(dòng)滾動(dòng)條才能顯示全部布局，這種絕對(duì)固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）的。只不過這個(gè)問題在當(dāng)時(shí)并沒有成為很嚴(yán)重普遍急需解決的問題，因?yàn)榘殡S而來的是各瀏覽器大戰(zhàn)，IE被chrome、firefox、Oparo等趕下神壇，大家都開始向W3C標(biāo)準(zhǔn)趨近，因?yàn)闉g覽器的增多，催生出了針對(duì)瀏覽器的css hack技術(shù)的出現(xiàn)，開發(fā)者們忙于兼容各種瀏覽器。在這個(gè)期間實(shí)際上已經(jīng)有了針對(duì)各設(shè)備適配的解決方案了，只是未成為主流，雖然不是主流，但不代表當(dāng)時(shí)就沒有人去用。當(dāng)時(shí)出現(xiàn)的新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡稱AWD）。在當(dāng)時(shí)，大多指的就是寬度自適應(yīng)布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。在當(dāng)時(shí)，大家都還沒有響應(yīng)式布局的概念，即便偉大的谷歌也沒有，但是卻出現(xiàn)了一個(gè)新的詞--漸進(jìn)增強(qiáng)。漸進(jìn)增強(qiáng)出現(xiàn)后，另一個(gè)詞優(yōu)雅降級(jí)也隨之出現(xiàn)了。關(guān)于兩個(gè)詞的概念請(qǐng)自行g(shù)oogle和wiki，這里只是舉個(gè)典型的例子：gmail和qqmail。這兩個(gè)都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。qqmail就是css hack的完美體現(xiàn)，你用任何一個(gè)瀏覽器，幾乎可以看到同一個(gè)樣子的郵箱，為的是用戶體驗(yàn)統(tǒng)一。gmail則使用了漸進(jìn)增強(qiáng)，你的瀏覽器越新越強(qiáng)，你看到的效果就越好，為的是用戶體驗(yàn)增強(qiáng)。再后來，Google發(fā)布了android，移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5標(biāo)準(zhǔn)發(fā)布。互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)。手機(jī)雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗(yàn)了，所以，谷歌式的漸進(jìn)增強(qiáng)被廣泛認(rèn)可，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局的概念（2010年由Ethan Marcotte提出），如果說以前這個(gè)雖有人用但非主流的話，那么在移動(dòng)互聯(lián)網(wǎng)（流量轉(zhuǎn)移）的沖擊和推動(dòng)下，再也沒有企業(yè)敢去忽視它了，而另一個(gè)將響應(yīng)式布局推上主流的重要原因是twitter開源了bootstrap。所以，在自適應(yīng)和響應(yīng)式中，響應(yīng)式布局成為了最終的解決方案勝出者。這也是現(xiàn)在很少有人去提自適應(yīng)的原因，但如果從廣義上講，響應(yīng)式布局實(shí)際上就是更好、更機(jī)智、更靈活的去實(shí)現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點(diǎn)講響應(yīng)式重在于「響應(yīng)」它會(huì)隨著設(shè)備屬性（如寬高）的變化，網(wǎng)頁也跟著變化。

• 靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局的對(duì)比：

  • 布局特點(diǎn)：
    靜態(tài)式布局：窗口縮小后內(nèi)容被遮擋時(shí)，拖動(dòng)滾動(dòng)條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個(gè)樣。移動(dòng)設(shè)備上則顯示太小或不全。
    自適應(yīng)布局：分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，相當(dāng)于多個(gè)靜態(tài)布局組成的一個(gè)系列合集，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，頁面通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，當(dāng)可視窗口改變時(shí)，不會(huì)出現(xiàn)橫向滾動(dòng)條，UI，圖片，文字會(huì)自動(dòng)縮放，元素內(nèi)容、布局、交互方式基本不變。
    流體式布局：屬于自適應(yīng)的一個(gè)子集，也是通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，不同于百分比自適應(yīng)的是隨著窗口大小的改變，頁面的布局會(huì)發(fā)生小的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)相補(bǔ)。
    響應(yīng)式布局：分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，并應(yīng)用流式布局的理念，每個(gè)彈性布局分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配，元素位置、大小、內(nèi)容會(huì)隨著改變，甚至某些元素會(huì)被隱藏掉，顯示效果和交互方式都會(huì)發(fā)生變化各不相同，所謂的效果即特效。可以理解成自適應(yīng)布局和流體布局的結(jié)合，也屬于自適應(yīng)的一個(gè)進(jìn)化版的子集。

  • 實(shí)現(xiàn)方式：
    靜態(tài)式布局：使用絕對(duì)寬高，PC居中布局，移動(dòng)則另建站點(diǎn)，以m.為二級(jí)域名。
    自適應(yīng)布局：使用寬度百分比，通過服務(wù)端腳本實(shí)現(xiàn)不同終端輸出不同的html/css/js來適配，保證所有設(shè)備上的顯示效果基本一致。
    流體式布局：利用寬度百分比，單位rem和viewport，瀏覽器文檔流浮動(dòng)來實(shí)現(xiàn)超過寬度，自動(dòng)流動(dòng)布局。
    響應(yīng)式布局：使用css3 media query媒體查詢斷點(diǎn)或js判斷和控制html改變布局，并使用寬度百分比，單位rem，流式布局fluid grids，自適應(yīng)圖片/視頻等內(nèi)容來更好的把控布局，但在開發(fā)之初就考慮到一個(gè)模塊在所有設(shè)備下的布局顯示情況。

  • 存在缺點(diǎn)：
    靜態(tài)式布局：pc端在瀏覽器可視窗口小于固定寬度或屏幕分辨率太低時(shí)：1、網(wǎng)頁內(nèi)容會(huì)被遮擋；2、出現(xiàn)滾動(dòng)條很丑；如果沒有針對(duì)移動(dòng)端做單獨(dú)做適配站點(diǎn)的話，在移動(dòng)設(shè)備上還會(huì)擠在一起，內(nèi)容顯示太小或不全，需要手動(dòng)縮放或移動(dòng)來查看其它內(nèi)容，有的布局也會(huì)亂掉，如果pc頁面就一屏的，移動(dòng)顯示還會(huì)下面留白，體驗(yàn)很差。
    自適應(yīng)布局：自適應(yīng)是基于斷點(diǎn)而使用的靜態(tài)布局集，一旦頁面被加載就無法再進(jìn)行自動(dòng)適應(yīng)，自適應(yīng)會(huì)自動(dòng)檢測屏幕的大小來加載適當(dāng)?shù)墓ぷ鞑季郑簿褪钦f，需要一個(gè)一個(gè)設(shè)計(jì)多種常見的屏幕布局（320、480、760、960、1200、1600），而且如果內(nèi)容較多，頁面就會(huì)很長，閱讀就很費(fèi)勁。
    流體式布局：流式布局雖然可以讓各種屏幕都適配，但是顯示效果極其不好，因?yàn)橹挥袔讉€(gè)尺寸的手機(jī)能夠完美的顯示出視覺設(shè)計(jì)師和交互最想要的效果。這種都是通過百分比定義寬度，高度大都采用px固定。所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實(shí)際顯示就會(huì)被拉伸變形，尤其是圖片看起來非常的不協(xié)調(diào)，這就是流式布局的最致命的缺點(diǎn)。后來有些就采用之前pc端的靜態(tài)布局方法，通過把頁面設(shè)置成固定320的寬度，超出部分留白的做法，這樣做視覺，前端和設(shè)計(jì)都開心，設(shè)計(jì)再也不用被流式布局限制自己的設(shè)計(jì)靈感了，前端也不用在搞坑爹的流式布局。但這種解決方案也存在一些問題，例如在大屏幕手機(jī)下兩邊不僅是大量留白的，看起來頁面也會(huì)特別小，操作的按鈕也很小，也不是最佳解決方案。后來則由響應(yīng)式來解決此類問題了。
    響應(yīng)式布局：1、響應(yīng)式設(shè)計(jì)僅是改善移動(dòng)體驗(yàn)并沒達(dá)到最優(yōu)化，因?yàn)橛行┰貢?huì)被隱藏，和單純針對(duì)移動(dòng)端設(shè)計(jì)獨(dú)立手機(jī)網(wǎng)站對(duì)比差距很大。2、響應(yīng)式設(shè)計(jì)并不利于SEO排名優(yōu)化。3、響應(yīng)式網(wǎng)站無法區(qū)分移動(dòng)端，浪費(fèi)流量，加載耗時(shí)長。因?yàn)樗前涯承﹥?nèi)容隱藏或縮小了，但對(duì)瀏覽器來說隱藏的內(nèi)容同樣會(huì)被加載，低分辨率設(shè)備會(huì)加載高質(zhì)量的圖片或者視頻，導(dǎo)致響應(yīng)式網(wǎng)站加載的內(nèi)容相比非響應(yīng)式網(wǎng)站會(huì)增加20-50%，速度慢，對(duì)于移動(dòng)端還有2G、3G的用戶來說就是災(zāi)難，每延長0.4秒就會(huì)流失5-9%的用戶。4、響應(yīng)式對(duì)于ie7,8瀏覽器簡直是悲劇，ie9,10表現(xiàn)也差強(qiáng)人意。響應(yīng)式一般都運(yùn)用了很多html5新特性，而這些新特性只有高級(jí)的現(xiàn)代瀏覽器才有出色表現(xiàn)。5、工作量大，維護(hù)難，體驗(yàn)不靈活。

  • viewport：
    靜態(tài)式布局：
    自適應(yīng)布局：
    流體式布局：
    響應(yīng)式布局：

  • 斷點(diǎn)（break point）：
    靜態(tài)式布局：
    自適應(yīng)布局：
    流體式布局：
    響應(yīng)式布局：

  • SEO：
    靜態(tài)式布局：
    自適應(yīng)布局：自適應(yīng)網(wǎng)站不容易聚集網(wǎng)站權(quán)重，但可以通過重定向進(jìn)行聚集權(quán)重。
    流體式布局：
    響應(yīng)式布局：響應(yīng)式網(wǎng)站容易聚集網(wǎng)站權(quán)重，容易把移動(dòng)端的權(quán)重與PC端的權(quán)重疊加，但并不利于SEO，因?yàn)橛脩粼诓煌K端的搜索習(xí)慣不同，搜索引擎對(duì)移動(dòng)網(wǎng)站和PC網(wǎng)站的關(guān)鍵詞處理策略和排名機(jī)制都是不相同的。而響應(yīng)式方案，不同終端訪問到的代碼是一樣的，無法設(shè)置不同的關(guān)鍵詞，針對(duì)性的優(yōu)化。

  • 開發(fā)難度：
    靜態(tài)式布局：
    自適應(yīng)布局：自適應(yīng)網(wǎng)站開發(fā)起來比較既復(fù)雜（不同屏幕的適配控制）又簡單（獨(dú)立于PC端），但是容易維護(hù)與調(diào)試（只有移動(dòng)端的處理事件）。
    流體式布局：
    響應(yīng)式布局：響應(yīng)式網(wǎng)站開發(fā)起來比較既簡單（只需通過媒體查詢來調(diào)整）又復(fù)雜（與PC端網(wǎng)頁元素耦合度大），但是不容易調(diào)試與維護(hù)（綁定了移動(dòng)端與手機(jī)端的處理事件）。

  • 用戶體驗(yàn)：
    靜態(tài)式布局：
    自適應(yīng)布局：自適應(yīng)網(wǎng)站保證移動(dòng)端更友好的體驗(yàn)。
    流體式布局：
    響應(yīng)式布局：響應(yīng)式網(wǎng)站保證PC端與移動(dòng)端的一致性，流式布局。

  • 頁面性能：
    靜態(tài)式布局：
    自適應(yīng)布局：自適應(yīng)網(wǎng)站只有移動(dòng)端的布局與樣式（內(nèi)容少），下載到瀏覽器立刻顯示，所以性能快。
    流體式布局：
    響應(yīng)式布局：響應(yīng)式網(wǎng)站不僅有移動(dòng)端的布局與樣式，還有PC的布局與樣式（內(nèi)容多），下載到瀏覽器之后進(jìn)行網(wǎng)頁布局調(diào)整再顯示，所以性能慢。當(dāng)然，響應(yīng)式網(wǎng)站也有提高性能的方法，就是針對(duì)屏幕加載不同的媒體查詢樣式，選擇性加載資源。但是性能依然不如自適應(yīng)網(wǎng)站。
    

• 典型實(shí)例：
  靜態(tài)式布局：http://www.qq.com/|https://taobao.com/|http://www.zmcmj.com/
  自適應(yīng)布局：https://sina.cn/|http://m.ctrip.com/|
  流體式布局：
  響應(yīng)式布局：http://www.aliued.com/|http://mashable.com/|https://microsoft.com/

• 響應(yīng)式和自適應(yīng)的區(qū)別聯(lián)系：
  響應(yīng)式（Responsive）和自適應(yīng)（Adaptive）的關(guān)系很密切，經(jīng)常二者是互通的。雖然互動(dòng)但卻沒有必然關(guān)系。什么意思呢？就是自適應(yīng)頁面可以是響應(yīng)式的，也可以不是響應(yīng)式的。響應(yīng)式頁面可以是自適應(yīng)的，也可以是不自適應(yīng)的（固定寬的）。自適應(yīng)強(qiáng)調(diào)「不寫死寬度」，響應(yīng)式強(qiáng)調(diào)「響應(yīng)」。
  自適應(yīng)主要針對(duì)的是移動(dòng)端來說的，它往往是應(yīng)對(duì)一個(gè)新需求或情況的被動(dòng)變化，它的目的是讓頁面在其他各個(gè)設(shè)備上瀏覽時(shí)，布局能保持一致性，不會(huì)因?yàn)槠聊粚捳笮《绊懸曈X和響應(yīng)效果，從而更友好的展示自己。它的特點(diǎn)是在不同的屏幕分辨率下，頁面元素內(nèi)容和布局不隨窗口大小的調(diào)整發(fā)生太大變化，寬度、圖片保持自適應(yīng)，內(nèi)容不會(huì)被遮擋不會(huì)刪減內(nèi)容，不會(huì)出現(xiàn)滾動(dòng)條，避免出現(xiàn)需要用手放大，拖拽瀏覽的情況。
  響應(yīng)式主要針對(duì)的是web端來說，它通常意味著對(duì)待任何變化，反應(yīng)更積極更快更靈活更主動(dòng)更具可讀性，相當(dāng)于針對(duì)不同分辨率量身打造的不同布局，在布局中應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整，布局和內(nèi)容也隨著自動(dòng)調(diào)整來適配，內(nèi)容元素和原網(wǎng)頁相似，有些甚至?xí)浑[藏掉，布局則根據(jù)設(shè)備不同，窗口大小，分辨率而不同，為的是以最好的姿態(tài)流暢自如的展示自己，響應(yīng)式可以理解為是自適應(yīng)的一個(gè)進(jìn)化版的子集。

RWD和AWD在斷點(diǎn)（ break point）上的區(qū)別：
RWD采用流體＋斷點(diǎn)，在斷點(diǎn)之間，頁面依然會(huì)隨窗口大小自動(dòng)縮放（通過fluid grid），直到遇到斷點(diǎn)改變界面樣式布局甚至內(nèi)容。RWD一般來說需要在網(wǎng)頁設(shè)計(jì)初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。
AWD 只在針對(duì)幾種分辨率（如320，480，760，960，1200，1600px）進(jìn)行優(yōu)化，在斷點(diǎn)之間的自動(dòng)過渡比較少。而AWD 則采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。

在下圖中可以看到，Responsive design中網(wǎng)頁和屏幕分辨率的關(guān)系是一對(duì)多的，一套網(wǎng)頁適應(yīng)多個(gè)設(shè)備。而Adaptive design中網(wǎng)頁和屏幕分辨率的關(guān)系則是一一對(duì)應(yīng)。

因此Responsive design相對(duì)來說靈活性更高，但是相應(yīng)的每次的載入內(nèi)容會(huì)比較多。而只針對(duì)某一類或某幾類分辨率設(shè)計(jì)響應(yīng)網(wǎng)頁大小Adaptive design的優(yōu)勢就在于減少載入的等待時(shí)間，提高網(wǎng)頁的響應(yīng)速度，如下圖：

從外觀上很難分辨，但他們自己運(yùn)行機(jī)理不同，RWD是主動(dòng)式的響應(yīng)設(shè)計(jì)，AWD是被動(dòng)式的響應(yīng)式設(shè)計(jì)，RWD不管用戶使用的是什么設(shè)備都是在服務(wù)器把數(shù)據(jù)推送到瀏覽器后，腳本或CSS自行偵測屏幕大小后執(zhí)行對(duì)應(yīng)的樣式表內(nèi)容，并且一直通過本地腳本在監(jiān)聽屏幕大小的變化，隨時(shí)做出樣式響應(yīng)的變化，所以是主動(dòng)的。但AWD是用戶通過瀏覽器發(fā)送請(qǐng)求后，服務(wù)器根據(jù)請(qǐng)求中夾帶的用戶設(shè)備設(shè)備信息做出判斷，調(diào)用已經(jīng)在服務(wù)器里準(zhǔn)備好的，適應(yīng)對(duì)應(yīng)設(shè)備樣式文件+HTML內(nèi)容+JS，返回給瀏覽器以這種方式響應(yīng)不同設(shè)備。

• 移動(dòng)端適配應(yīng)該選擇那種方式？：

如果我們要去做移動(dòng)端，一般會(huì)有三種選擇：響應(yīng)式設(shè)計(jì)、獨(dú)立手機(jī)站、獨(dú)立app。獨(dú)立手機(jī)站的體驗(yàn)好，但由于獨(dú)立手機(jī)站的開發(fā)和維護(hù)成本都很大，數(shù)據(jù)無法打通不說，還需要更多的編輯維護(hù)內(nèi)容。而對(duì)于體驗(yàn)更好的獨(dú)立開發(fā)APP來說，成本則更大，而且對(duì)很多小企業(yè)來說根本沒必要，開發(fā)出來后，推廣下載量又是個(gè)問題。所以，如果企業(yè)屬于小企業(yè)，業(yè)務(wù)類型簡單，只是企業(yè)站或博客類做適配則推薦響應(yīng)式。如果是大企業(yè)，業(yè)務(wù)復(fù)雜尤其是那些電子商務(wù)型的，采用響應(yīng)式則工作量巨大，維護(hù)難，很多頁面都很老舊，還需要重構(gòu)，這種則不如直接針對(duì)移動(dòng)做個(gè)獨(dú)立站點(diǎn)，啟用二級(jí)域名M來解決，反而更省成本，提高效率。這也是國內(nèi)很多大站淘寶，qq，百度等沒有做響應(yīng)式的原因。

一是看應(yīng)用場景，二是看如何設(shè)計(jì)“響應(yīng)式”方案。簡單、輕量的頁面直接用media query實(shí)現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類。現(xiàn)在的CSS框架基本都具備響應(yīng)性。但請(qǐng)注意響應(yīng)式不僅僅是響應(yīng)式布局。對(duì)于大型站簡單用media query是遠(yuǎn)遠(yuǎn)不夠的。于是在同一個(gè)controller層上，識(shí)別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源。這也算是響應(yīng)式。開發(fā)及維護(hù)成本明顯提高。當(dāng)各個(gè)版本間的差異很大時(shí)，維護(hù)成本很可能會(huì)大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層app化。根據(jù)不同公司的技術(shù)特點(diǎn)，調(diào)整的成本也難講是否可行。對(duì)于大型站，分開做更清晰，同時(shí)用響應(yīng)式組件解決復(fù)用、功能同步的問題。比如原生的select控件，在pc、android、ios下有不同的呈現(xiàn)和交互，但用法是一致的。同理，通用的業(yè)務(wù)組件也可以這樣做。web component普及后最終能解決這個(gè)問題。現(xiàn)在這個(gè)階段，可以設(shè)計(jì)類web component的方案。另外，從優(yōu)化角度，是否分開做，圖片之類靜態(tài)資源的響應(yīng)性都是有必要做的。總之，根據(jù)場景響應(yīng)式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點(diǎn)。

總結(jié)：推薦開發(fā)自適應(yīng)網(wǎng)站，追求性能與用戶體驗(yàn)。（大多數(shù)的互聯(lián)網(wǎng)公司都是web PC端與移動(dòng)端分離的）
響應(yīng)式網(wǎng)站不適合開發(fā)一些比較復(fù)雜的網(wǎng)站。（涉及一些動(dòng)畫交互效果，頁面元素過多）
建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過渡到平板端，不過渡到手機(jī)端）和開發(fā)一套響應(yīng)式手機(jī)端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）

移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應(yīng)式設(shè)計(jì)來解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)。

復(fù)雜的頁面，前端經(jīng)常變化的頁面，響應(yīng)式還是算了吧，像我們針對(duì)設(shè)備不同界面的傳統(tǒng)搞法確實(shí)屌絲，冗余代碼無力吐槽了，但是維護(hù)起來確實(shí)方便些，不至于bug補(bǔ)好東墻，鑿穿西墻，響應(yīng)式遇到頁面變更時(shí)常常半夜電話響不停，響應(yīng)式，影響夫妻和諧，你造嗎；

但如果頁面復(fù)雜一點(diǎn)的，那信息取舍就是個(gè)難題。
需求變更頻繁一點(diǎn)的，設(shè)計(jì)的延續(xù)性就是個(gè)難題。
在性能決定一切的當(dāng)下，移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須和閃電一樣快。迅速、實(shí)用、兼容的體驗(yàn)對(duì)所有移動(dòng)設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計(jì)時(shí)，這些挑戰(zhàn)就存在。pc和移動(dòng)分開性能真比響應(yīng)式好。一個(gè)核心兩套模板就行，別看那些手機(jī)配置多高，實(shí)際和電腦真沒法比，響應(yīng)式代碼真的復(fù)雜了。其次手機(jī)下載那么多文件，網(wǎng)絡(luò)成問題，我最近才升4G，用2G的大有人在。客戶體驗(yàn)很重要。不要只知道滿足程序員自己的技術(shù)追求。援引Ethan Marcotte的話：“最重要的是，響應(yīng)式網(wǎng)頁設(shè)計(jì)的初衷不是要取代移動(dòng)網(wǎng)頁。”響應(yīng)式設(shè)計(jì)從來不是意味著要解決“性能”，然而，相信它能解決你所有問題，這大錯(cuò)特錯(cuò)。如果我們能使用一些其他的技術(shù)，就可以實(shí)現(xiàn)獲得響應(yīng)式設(shè)計(jì)好處的同時(shí)，同時(shí)又不影響移動(dòng)設(shè)備的性能，這是比較理想的。

響應(yīng)式布局有可能造成冗余的代碼較多，對(duì)研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動(dòng)畫自適應(yīng)各種布局。

大站還是要考慮數(shù)據(jù)計(jì)算和承載的問題，會(huì)對(duì)桌面和移動(dòng)端輸出不同數(shù)據(jù)，減輕壓力。

綜上幾點(diǎn)就解釋了為什么國內(nèi)很多大企業(yè)都沒使用響應(yīng)式，不論是淘寶、天貓、京東、唯品會(huì)，還是騰訊、百度、新浪、360都采用分開建設(shè)電腦端和移動(dòng)端網(wǎng)站的方式。當(dāng)然，大站里面也有響應(yīng)式做的好的，主要是網(wǎng)站類型比較適合和網(wǎng)速等都有關(guān)系，比如：thenextweb、dribbble、aol等。

設(shè)置viewport進(jìn)行縮放：
天貓的web app的首頁就是采用這種方式去做的，以320寬度為基準(zhǔn)，進(jìn)行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個(gè)方法簡單粗暴，又高效。

http://www.cnblogs.com/qieguo/p/5421252.html
https://www.zhihu.com/question/38065402
https://www.zhihu.com/question/25836425
http://mediaqueri.es/
http://www.resizer.cn/
http://alistapart.com/article/responsive-web-design
http://www.shejidaren.com/principles-of-responsive-web-design.html
http://qietuwang.baijia.baidu.com/article/75296
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.alloyteam.com/2015/04/zi-shi-ying-she-ji-yu-xiang-ying-shi-wang-ye-she-ji-qian-tan/
http://www.codingserf.com/index.php/2014/07/responsive-and-mobile-1/
http://www.passquan.cn/node/136%201.10%E4%B8%AA%E8%87%AA%E9%80%82%E5%BA%94%E7%BD%91%E7%AB%99%E8%AE%BE%E8%AE%A1TIPS
詳解：
viewport即網(wǎng)頁的視窗區(qū)域，對(duì)于桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁的區(qū)域。對(duì)于pc端并沒有什么問題，不設(shè)置也沒關(guān)系。但移動(dòng)互聯(lián)網(wǎng)浪潮來了后，對(duì)于早期的未針對(duì)手機(jī)瀏覽器做優(yōu)化的頁面如何在手機(jī)瀏覽器上正確顯示同時(shí)不破壞網(wǎng)頁原有的結(jié)構(gòu)布局就成了一個(gè)問題。因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的viewport太窄，而擠作一團(tuán)（如下圖左圖所示，幾乎看不清內(nèi)容），甚至布局什么的都會(huì)亂掉。為何會(huì)這樣呢？因?yàn)閏ss中的1px并不是代表屏幕上的1px（這個(gè)問題下面有擴(kuò)展）。為解決這個(gè)問題，就引入了viewport 的元標(biāo)簽（viewport標(biāo)簽最初為apple所推行，適用于IOS中的Safari，后各大瀏覽器廠商陸續(xù)采用了它）。viewport就是手機(jī)端瀏覽器（也可能是一個(gè)app中的webview）的一個(gè)虛擬“窗口”，而這個(gè)虛擬的窗口（viewport）并不局限于瀏覽器可視區(qū)域（你所能看到的）的大小，它可大于或小于手機(jī)瀏覽器的可視區(qū)域，考慮到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來說都比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為PC瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），也就是說，一般手機(jī)默認(rèn)viewport是大于可視區(qū)域的。默認(rèn)情況下，用戶可以通過手動(dòng)平移和縮放來看網(wǎng)頁的不同部分。但隨之帶來的副作用就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，很丑。

• visual viewport
• layout viewport
• ideal viewport
  這三個(gè)是分別代表什么意思呢？

visual viewport：手機(jī)物理屏幕上瀏覽器可視區(qū)域的大小。就是當(dāng)前顯示給用戶可以看到內(nèi)容的窗口，它包含網(wǎng)頁的所有內(nèi)容，可以全部或者部分展示給用戶，你可以拖動(dòng)或者放大縮小來看網(wǎng)頁的其他內(nèi)容。簡單說就是visual viewport==屏幕顯示器的物理像素==瀏覽器可視區(qū)域（同樣尺寸的屏幕，像素密度大的設(shè)備，硬件像素會(huì)更多），visual viewport的寬度可以通過window.innerWidth來獲取，但在Android 2, Oprea mini 和 UC 8中無法正確獲取。

layout viewport：移動(dòng)設(shè)備上瀏覽器的默認(rèn)布局區(qū)域。這個(gè)layout viewport的寬度可以通過document.documentElement.clientWidth來獲取。
下圖是一些移動(dòng)設(shè)備上瀏覽器的默認(rèn)viewport寬度：

常見移動(dòng)設(shè)備默認(rèn)viewport寬度

• ideal viewport：能完美適配移動(dòng)設(shè)備的理想viewport。即用戶無需縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容，而且顯示的文字和圖片的大小在任何分辨率下，任何密度屏幕下，均可以正常顯示，不會(huì)縮小看不清。ideal viewport并沒有一個(gè)固定的尺寸，不同的設(shè)備有不同的ideal viewport。所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。但是安卓設(shè)備就比較復(fù)雜了，有320px的，有360px的，有384px的等等，關(guān)于不同的設(shè)備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，里面收集了眾多設(shè)備的理想寬度。

三種viewport中，ideal viewport是最適合移動(dòng)設(shè)備的viewport，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把網(wǎng)頁的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對(duì)ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px；5.5寸設(shè)備設(shè)為400px；iphone6設(shè)為375px；ipone6 plus設(shè)為414px。

https://www.zhihu.com/question/20628050?rf=24334181
http://blog.jobbole.com/44319/
http://www.css88.com/archives/5975
http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml
http://www.cnblogs.com/2050/p/3877280.html
https://segmentfault.com/a/1190000002685485
https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag