摘要：所以一個(gè)網(wǎng)，甚至是響應(yīng)式設(shè)計(jì)，在兩個(gè)平臺(tái)上都會(huì)損害您整體的。三響應(yīng)式與如果把網(wǎng)站作為一個(gè)多帶帶的網(wǎng)站，如果網(wǎng)站的內(nèi)容與桌面版的內(nèi)容相對(duì)缺少，導(dǎo)致用戶回到桌面端的網(wǎng)站，會(huì)記錄這種選擇，使搜索排名降低，國(guó)內(nèi)百度就不知道會(huì)怎樣。

1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來(lái)可以繼續(xù)發(fā)展。
2、網(wǎng)速對(duì)于用戶的web使用體驗(yàn)有著巨大的影響。
3、對(duì)于標(biāo)準(zhǔn)的支持。瀏覽器對(duì)于標(biāo)準(zhǔn)的支持也很有限。
4、輸入的方式。觸屏設(shè)備，各種手勢(shì)操作。
5、使用的環(huán)境。設(shè)備在物理上和架構(gòu)上的特性，并不是我們?cè)卺槍?duì)設(shè)備進(jìn)行設(shè)計(jì)時(shí)需要考慮的唯一因素。了解使用環(huán)境是從相應(yīng)設(shè)備的Web到響應(yīng)人的Web的關(guān)鍵。
響應(yīng)式設(shè)計(jì)的提出是由 Ethan Marcotte提出的概念，

根據(jù)Ethan Marcotte的定義：

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

簡(jiǎn)單來(lái)說(shuō)就是適配各種終端的網(wǎng)頁(yè)設(shè)計(jì)。這里容易混淆的是自適應(yīng)設(shè)計(jì)（adaptive web design），國(guó)內(nèi)有些人把響應(yīng)式設(shè)計(jì)也翻譯為自適應(yīng)設(shè)計(jì)，二者有著一些差別。

there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.

根據(jù)不同的屏幕寬度加載不同的結(jié)構(gòu)。如下圖所示，上面的是響應(yīng)式布局，下面的是自適應(yīng)布局（自適應(yīng)可以是流式布局，也可以是固定布局，而響應(yīng)式布局只能是流式布局）

注：圖片來(lái)源于GEOFF GRAHAM

響應(yīng)式設(shè)計(jì)要求更多的代碼，它能夠很好地適應(yīng)所有的屏幕尺寸。
自適應(yīng)設(shè)計(jì)只是針對(duì)于某幾個(gè)特定的尺寸，一旦有新的屏幕尺寸出現(xiàn)，需要增加一些新的代碼。
更加詳細(xì)的解釋可以看一下《What is the difference between responsive vs. adaptive web design?》

The goal is ensuring content is optimized for our audiences no matter what device they"re on.

--Garrett Goodman

現(xiàn)在都是把這兩種布局混合起來(lái)使用，剛開(kāi)始我們是按照幾個(gè)主要的屏幕分辨率做出設(shè)計(jì)稿，在重構(gòu)過(guò)程中是按照響應(yīng)式設(shè)計(jì)的特點(diǎn)，確保其能夠在各種屏幕分辨率中都能夠正常顯示。
折衷的方法，確保在主要的分辨率屏幕上的效果與設(shè)計(jì)稿完全一致，但是在其他比較次要的分辨率下，很難保持一致，特別是一些采用百分比的元素，所以這時(shí)候的對(duì)齊只能寄希望于左、右、居中對(duì)齊。

適應(yīng)所有設(shè)備，更容易管理。

一個(gè)URL：讓你的用戶在移動(dòng)設(shè)備上更容易找到，而且不需要任何的重定向，這在較慢的網(wǎng)速下特別的有用。

容易做搜索引擎優(yōu)化：不需要為移動(dòng)設(shè)備創(chuàng)建特定的內(nèi)容，可以讓移動(dòng)設(shè)備使用桌面網(wǎng)站的搜索引擎優(yōu)化的好處。

易于營(yíng)銷：網(wǎng)站在移動(dòng)設(shè)備上顯示，對(duì)于營(yíng)銷部門來(lái)說(shuō)不需要增加額外的工作量。

成本低：簡(jiǎn)單的數(shù)學(xué)運(yùn)算，一個(gè)網(wǎng)站比兩個(gè)網(wǎng)站要便宜吧。

一個(gè)網(wǎng)站：讓一個(gè)網(wǎng)站適配所有網(wǎng)站，對(duì)于你來(lái)說(shuō)很容易，但不一定適合你的用戶。你需要在同一個(gè)頁(yè)面上展示不同的側(cè)重點(diǎn)，以便使用該平臺(tái)的最大優(yōu)勢(shì)，最大限度的提高你的轉(zhuǎn)化率。

技術(shù)：響應(yīng)式設(shè)計(jì)他是一種較新的技術(shù)，在一些老的設(shè)備和瀏覽器中加載頁(yè)面速度過(guò)慢，甚至是完全不支持。

用戶體驗(yàn)：移動(dòng)端和PC機(jī)上的用戶體驗(yàn)是完全不同的。所以一個(gè)網(wǎng)，甚至是響應(yīng)式設(shè)計(jì)，在兩個(gè)平臺(tái)上都會(huì)損害您整體的UX。如果你試圖使用相同的界面來(lái)滿足移動(dòng)和桌面的兩個(gè)平臺(tái)的用戶使用，到最后可能誰(shuí)都無(wú)法滿足。

如果把網(wǎng)站作為一個(gè)多帶帶的網(wǎng)站，如果網(wǎng)站的內(nèi)容與桌面版的內(nèi)容相對(duì)缺少，導(dǎo)致用戶回到桌面端的網(wǎng)站，google會(huì)記錄這種選擇，使搜索排名降低，國(guó)內(nèi)百度就不知道會(huì)怎樣。

由于存在不同的網(wǎng)站，所以有一個(gè)版本的問(wèn)題，網(wǎng)站版本錯(cuò)誤可能會(huì)導(dǎo)致游客到之前的版本。

搜索排名可以從移動(dòng)端和桌面端雙端得到很強(qiáng)的反向鏈接配置文件(搜索有關(guān))，有利于在搜索結(jié)果中得到較先的的搜索排名。

一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
缺點(diǎn)：舊瀏覽器的用戶體驗(yàn)會(huì)有偏差

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

現(xiàn)在有兩種設(shè)計(jì)觀點(diǎn)，移動(dòng)優(yōu)先和桌面優(yōu)先。
從桌面開(kāi)始向下設(shè)計(jì)、 從移動(dòng)端開(kāi)始向上設(shè)計(jì)
兩種觀點(diǎn)主要由于面向的主流對(duì)象的不同，優(yōu)雅降級(jí)主要是面向pc端為主流?，F(xiàn)在工作室采用的就是優(yōu)雅降級(jí)。
移動(dòng)優(yōu)先是從移動(dòng)端開(kāi)始，然后再逐漸向桌面端適應(yīng)。

觸摸設(shè)備上的觸摸區(qū)域是不是足夠大

設(shè)計(jì)方案在什么樣尺寸的屏幕上顯示折疊菜單按鈕

人們與動(dòng)態(tài)元素的交互有多復(fù)雜

增加一個(gè)斷點(diǎn)是否能夠提升設(shè)計(jì)

是否可以針對(duì)某一給定設(shè)備增強(qiáng)使用體驗(yàn)

哪些微小的調(diào)整對(duì)于支持更大范圍的設(shè)備會(huì)有所幫助

關(guān)于響應(yīng)式斷點(diǎn)的設(shè)置，一開(kāi)始我們要明確我們的目的：

考慮所有設(shè)備的分辨率，保證任何分辨率都能夠有良好的體驗(yàn)

考慮主流屏幕分辨率的大小，確保這幾種分辨率下與設(shè)計(jì)稿有著良好的重合性，其它分辨率下沒(méi)有出現(xiàn)明顯的錯(cuò)位和排版錯(cuò)位就可以了。

第2個(gè)目的其實(shí)是第1個(gè)目的的子集，第1個(gè)目的對(duì)于應(yīng)對(duì)未來(lái)分辨率的變化具有很強(qiáng)的適應(yīng)性，但同時(shí)伴隨著技術(shù)要求的提高和工作量的增大。

根據(jù)百度流量研究院的統(tǒng)計(jì)近期6個(gè)月分辨率使用情況，

bootstrap4.0斷點(diǎn)設(shè)置如下

1380px、992px、768px、544px

我所在團(tuán)隊(duì)所設(shè)置的斷點(diǎn)

2k、1920px、1200px、960px、768px、450px

對(duì)于響應(yīng)式設(shè)計(jì)稿，由于設(shè)置了很多斷點(diǎn)，所以我們需要做出多少份設(shè)計(jì)稿？我們不可能把所有分辨率的設(shè)計(jì)稿都繪制出來(lái)。以我做過(guò)的響應(yīng)式網(wǎng)站項(xiàng)目，設(shè)計(jì)稿可分為:

>1200px  以1200px為主體的1920px稿
>960px   以960px為主體的1200px稿
480px~768px 768px稿(兩邊不貼邊，留5px左右)
手機(jī)   <720px(畫布大小為720x1280,不貼邊)

歡迎大家一起討論。

瀏覽器會(huì)涉及到兩種像素：設(shè)備像素和css像素
設(shè)備像素是物理概念，而CSS像素是WEB編程的概念

iPhone等設(shè)備上一個(gè)css像素實(shí)際上對(duì)應(yīng)兩個(gè)設(shè)備像素，這也是二倍圖的由來(lái)。

user-scalable=no 是禁止縮放的意思。
其余屬性都是為了保持設(shè)計(jì)稿原來(lái)的大小，防止由于手機(jī)自身瀏覽器渲染不同的原因使網(wǎng)頁(yè)在不同手機(jī)瀏覽器中的效果不同。

對(duì)于ios設(shè)備進(jìn)行一些初始化操作。

@media的查詢類型: 10種類別，常用為screen
更多Media類型參見(jiàn)：Media types

@media screen and (min-width: 1200px) and (max-width: 1920px) {
   .class {
     background: #fff;
   }
}

< link rel ="stylesheet" type ="text/css" href = "index.css"  media = "screen and (min-width: 1200px)" >

not: not是用來(lái)排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）。
only: 用來(lái)定某種特別的媒體類型。
all: 所有設(shè)備，這個(gè)應(yīng)該經(jīng)?？吹健?/p>

我們注意一下以下三種寫法的不同之處：

@media (max-width:1200px)

窗口小于1200px的時(shí)候應(yīng)用后面的樣式

@media screen and (max-width:1200px)

識(shí)別為screen設(shè)備，且窗口小于1200px的時(shí)候應(yīng)用后面的樣式

@media only screen and (max-width:1200px)

對(duì)于only關(guān)鍵字,w3c的解釋為

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

意思是對(duì)于only，老的用戶代理會(huì)隱藏掉后面的樣式內(nèi)容，而（可識(shí)別only）用戶代理在執(zhí)行媒體查詢的時(shí)候，會(huì)忽略only.
stackoverflow有更多詳細(xì)內(nèi)容，可以參見(jiàn)下方的參考資料鏈接。

最為常見(jiàn)的實(shí)現(xiàn)方式。優(yōu)點(diǎn)是對(duì)于頁(yè)面擁有跟多的控制權(quán)。大屏幕的則會(huì)留很多空白，對(duì)于小的屏幕就會(huì)出現(xiàn)滾動(dòng)條

采用百分比，是頁(yè)面具有可變的特性，可避免出現(xiàn)的大片留白。但是有些文本的行款在大屏幕上看起來(lái)太寬，小屏幕上有太窄。

與流體布局類似，但是采用em作為單位，em為當(dāng)前字體的大小。除了跟流體布局類似的優(yōu)點(diǎn)外，用戶增大或減少字體，使用彈性布局的元素的寬度也會(huì)等比例變化。也會(huì)出現(xiàn)水平滾動(dòng)欄。

幾種布局的集合。

無(wú)需考慮級(jí)聯(lián)(父元素的字體大小對(duì)于子元素沒(méi)有影響)，但是對(duì)于維護(hù)來(lái)說(shuō)，當(dāng)你想要改變所有字體的大小時(shí)，你得修改所有的（sass改變了這種現(xiàn)狀，因?yàn)閟ass擁有變量）

是級(jí)聯(lián)的，但是上下文環(huán)境如果變了，基準(zhǔn)也會(huì)隨之而改變。

與em差不多，只有處于em直接與文本大小相關(guān)的考慮時(shí)，使用em才更有意義。
在IE中IE會(huì)夸大實(shí)際應(yīng)當(dāng)調(diào)整的字體大小，可以設(shè)置

body{
    font-size:100%;
}

這樣就不會(huì)有夸大的問(wèn)題了。

rem與em的區(qū)別在與rem的大小與根元素——HTML元素有關(guān)，能夠避免發(fā)生在嵌套元素中的級(jí)聯(lián)問(wèn)題
兼容性可以看這個(gè)兼容性；更多的介紹可以看響應(yīng)式十日談第一日：使用 rem 設(shè)置文字大小.可以使用sass進(jìn)行自計(jì)算，為了考慮兼容性，可以使用下列代碼

span{
    font-size:16px;
    font-size:1rem;
}

如果在沒(méi)有css預(yù)處理工具之前，rem由于考慮兼容性還是要修改所有的像素，但是由于類似sass之類的工具，這個(gè)問(wèn)題就不會(huì)增加太多的成本，所以我們可以大膽的使用rem這個(gè)單位，但是并不是所有的樣式都是適用rem。

詳見(jiàn)Responsive Images 101, Part 1: Definitions

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.

其他的我建議閱讀一下這一系列文章：《響應(yīng)式圖片101》

如何加快和優(yōu)化響應(yīng)式布局網(wǎng)站的頁(yè)面加載速度
響應(yīng)式設(shè)計(jì)的性能優(yōu)化

比較方便快捷的一種方式，但有時(shí)與真機(jī)會(huì)有一些差別。

這個(gè)要安裝兩個(gè)軟件，比較麻煩，一般不建議
響應(yīng)式網(wǎng)站開(kāi)發(fā)跨平臺(tái)真機(jī)調(diào)試工具

重磅推薦Browsersync，非常的方便快捷，配合前端自動(dòng)化流程工具，一修改代碼，所有設(shè)備都實(shí)時(shí)刷新。要確保處于同一區(qū)域網(wǎng)內(nèi)。
以下是可能用到的命令：

npm install -g browser-sync
browser-sync start --server --files="*" 

性能
移動(dòng)設(shè)備外部的樣式表和腳本會(huì)嚴(yán)重降低站點(diǎn)的性能，不會(huì)被緩存，雖然隱藏了內(nèi)容，但是標(biāo)簽和css仍會(huì)被下載。

使用環(huán)境
主要用戶的使用環(huán)境

內(nèi)容協(xié)商
根據(jù)內(nèi)容的重要性去重新組織或者重構(gòu)你的站點(diǎn)的內(nèi)容。

時(shí)間投入
響應(yīng)式網(wǎng)站需要花費(fèi)更多的時(shí)間，如果項(xiàng)目時(shí)間很緊的話，要好好考慮一下。但是多花費(fèi)的時(shí)間會(huì)在維護(hù)成本中得到彌補(bǔ)。

支持
瀏覽器支持，漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

廣告

隨著現(xiàn)代瀏覽器市場(chǎng)份額的越來(lái)越多，hash操作的兼容性越來(lái)越好了，所以我們可以很方便的利用hash實(shí)現(xiàn)一個(gè)頁(yè)面的碎片化，比如同是www.example.com這個(gè)網(wǎng)址的頁(yè)面，我可以把其分解成三個(gè)子頁(yè)面為www.example.com#page=1、www.example.com#page=2、www.example.com#page=3，把數(shù)據(jù)的拉取交給hash值，然后在移動(dòng)端多帶帶加載一個(gè)碎片頁(yè)面如www.example.com#page=1，然后采取跳頁(yè)面的方式轉(zhuǎn)到www.example.com#page=2等，而在桌面端則一次性把幾個(gè)hash值所控制的數(shù)據(jù)全都拉取下來(lái)在一個(gè)頁(yè)面上展示，這樣就用hash來(lái)操控桌面端與移動(dòng)端的數(shù)據(jù)，使之更符合各自的情況。

在客戶端每一次請(qǐng)求數(shù)據(jù)的時(shí)候，都會(huì)告訴服務(wù)端自己的身份，也就是所謂的UA了，客戶端JS可以獲取UA值，服務(wù)端也可以獲取UA值，利用UA值就可以識(shí)別各種終端，然后做頁(yè)面跳轉(zhuǎn)的工作了，這里可以依賴node很好的做UA檢測(cè)與跳轉(zhuǎn)。其原理基本是：客戶端訪問(wèn)我們的URL，比方說(shuō)www.example.com，用node獲取請(qǐng)求request，然后判斷其UA類型，根據(jù)UA瀏覽器再去后臺(tái)拉取數(shù)據(jù)，后臺(tái)數(shù)據(jù)返回給node，再由node返回給用戶，雖然多了一個(gè)node環(huán)節(jié)，但是操作的靈活性也就高多了，這樣對(duì)外只有一個(gè)URL，對(duì)內(nèi)可以存在多個(gè)api，如api-pad.example.com、api-phone.example.com，對(duì)于內(nèi)部可以是全數(shù)據(jù)的，然后再在node環(huán)節(jié)做UI封裝，鬼道也建議在桌面端直接返回頁(yè)面而在移動(dòng)端返回?cái)?shù)據(jù)，這樣使得移動(dòng)端更加輕量。

想學(xué)響應(yīng)式設(shè)計(jì)？來(lái)看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)
中國(guó)響應(yīng)式網(wǎng)站分享

Ethan Marcotte博客

Responsive or Adaptive Design – Which is Best for Mobile Viewing of Your 3. Website?

The SEO of Responsive Web Design

《響應(yīng)式Web設(shè)計(jì)實(shí)踐》[美]Tim Kadlec著 侯鴻儒 譯

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的有什么不同？

screen sizes

詳細(xì)解釋 @media 屬性與 (max-width:) and (min-width) 之間的關(guān)系及用法

What is the difference between “screen” and “only screen” in media queries?