摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個多帶帶的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。

1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以繼續發展。
2、網速對于用戶的web使用體驗有著巨大的影響。
3、對于標準的支持。瀏覽器對于標準的支持也很有限。
4、輸入的方式。觸屏設備，各種手勢操作。
5、使用的環境。設備在物理上和架構上的特性，并不是我們在針對設備進行設計時需要考慮的唯一因素。了解使用環境是從相應設備的Web到響應人的Web的關鍵。
響應式設計的提出是由 Ethan Marcotte提出的概念，

根據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.

簡單來說就是適配各種終端的網頁設計。這里容易混淆的是自適應設計（adaptive web design），國內有些人把響應式設計也翻譯為自適應設計，二者有著一些差別。

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

根據不同的屏幕寬度加載不同的結構。如下圖所示，上面的是響應式布局，下面的是自適應布局（自適應可以是流式布局，也可以是固定布局，而響應式布局只能是流式布局）

注：圖片來源于GEOFF GRAHAM

響應式設計要求更多的代碼，它能夠很好地適應所有的屏幕尺寸。
自適應設計只是針對于某幾個特定的尺寸，一旦有新的屏幕尺寸出現，需要增加一些新的代碼。
更加詳細的解釋可以看一下《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

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

適應所有設備，更容易管理。

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

容易做搜索引擎優化：不需要為移動設備創建特定的內容，可以讓移動設備使用桌面網站的搜索引擎優化的好處。

易于營銷：網站在移動設備上顯示，對于營銷部門來說不需要增加額外的工作量。

成本低：簡單的數學運算，一個網站比兩個網站要便宜吧。

一個網站：讓一個網站適配所有網站，對于你來說很容易，但不一定適合你的用戶。你需要在同一個頁面上展示不同的側重點，以便使用該平臺的最大優勢，最大限度的提高你的轉化率。

技術：響應式設計他是一種較新的技術，在一些老的設備和瀏覽器中加載頁面速度過慢，甚至是完全不支持。

用戶體驗：移動端和PC機上的用戶體驗是完全不同的。所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的UX。如果你試圖使用相同的界面來滿足移動和桌面的兩個平臺的用戶使用，到最后可能誰都無法滿足。

如果把網站作為一個多帶帶的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，google會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。

由于存在不同的網站，所以有一個版本的問題，網站版本錯誤可能會導致游客到之前的版本。

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

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
缺點：舊瀏覽器的用戶體驗會有偏差

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

現在有兩種設計觀點，移動優先和桌面優先。
從桌面開始向下設計、 從移動端開始向上設計
兩種觀點主要由于面向的主流對象的不同，優雅降級主要是面向pc端為主流。現在工作室采用的就是優雅降級。
移動優先是從移動端開始，然后再逐漸向桌面端適應。

觸摸設備上的觸摸區域是不是足夠大

設計方案在什么樣尺寸的屏幕上顯示折疊菜單按鈕

人們與動態元素的交互有多復雜

增加一個斷點是否能夠提升設計

是否可以針對某一給定設備增強使用體驗

哪些微小的調整對于支持更大范圍的設備會有所幫助

關于響應式斷點的設置，一開始我們要明確我們的目的：

考慮所有設備的分辨率，保證任何分辨率都能夠有良好的體驗

考慮主流屏幕分辨率的大小，確保這幾種分辨率下與設計稿有著良好的重合性，其它分辨率下沒有出現明顯的錯位和排版錯位就可以了。

第2個目的其實是第1個目的的子集，第1個目的對于應對未來分辨率的變化具有很強的適應性，但同時伴隨著技術要求的提高和工作量的增大。

根據百度流量研究院的統計近期6個月分辨率使用情況，

bootstrap4.0斷點設置如下

1380px、992px、768px、544px

我所在團隊所設置的斷點

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

對于響應式設計稿，由于設置了很多斷點，所以我們需要做出多少份設計稿？我們不可能把所有分辨率的設計稿都繪制出來。以我做過的響應式網站項目，設計稿可分為:

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

歡迎大家一起討論。

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

iPhone等設備上一個css像素實際上對應兩個設備像素，這也是二倍圖的由來。

user-scalable=no 是禁止縮放的意思。
其余屬性都是為了保持設計稿原來的大小，防止由于手機自身瀏覽器渲染不同的原因使網頁在不同手機瀏覽器中的效果不同。

對于ios設備進行一些初始化操作。

@media的查詢類型: 10種類別，常用為screen
更多Media類型參見：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是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）。
only: 用來定某種特別的媒體類型。
all: 所有設備，這個應該經常看到。

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

@media (max-width:1200px)

窗口小于1200px的時候應用后面的樣式

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

識別為screen設備，且窗口小于1200px的時候應用后面的樣式

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

對于only關鍵字,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.

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

最為常見的實現方式。優點是對于頁面擁有跟多的控制權。大屏幕的則會留很多空白，對于小的屏幕就會出現滾動條

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

與流體布局類似，但是采用em作為單位，em為當前字體的大小。除了跟流體布局類似的優點外，用戶增大或減少字體，使用彈性布局的元素的寬度也會等比例變化。也會出現水平滾動欄。

幾種布局的集合。

無需考慮級聯(父元素的字體大小對于子元素沒有影響)，但是對于維護來說，當你想要改變所有字體的大小時，你得修改所有的（sass改變了這種現狀，因為sass擁有變量）

是級聯的，但是上下文環境如果變了，基準也會隨之而改變。

與em差不多，只有處于em直接與文本大小相關的考慮時，使用em才更有意義。
在IE中IE會夸大實際應當調整的字體大小，可以設置

body{
    font-size:100%;
}

這樣就不會有夸大的問題了。

rem與em的區別在與rem的大小與根元素——HTML元素有關，能夠避免發生在嵌套元素中的級聯問題
兼容性可以看這個兼容性；更多的介紹可以看響應式十日談第一日：使用 rem 設置文字大小.可以使用sass進行自計算，為了考慮兼容性，可以使用下列代碼

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

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

詳見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.

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

如何加快和優化響應式布局網站的頁面加載速度
響應式設計的性能優化

比較方便快捷的一種方式，但有時與真機會有一些差別。

這個要安裝兩個軟件，比較麻煩，一般不建議
響應式網站開發跨平臺真機調試工具

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

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

性能
移動設備外部的樣式表和腳本會嚴重降低站點的性能，不會被緩存，雖然隱藏了內容，但是標簽和css仍會被下載。

使用環境
主要用戶的使用環境

內容協商
根據內容的重要性去重新組織或者重構你的站點的內容。

時間投入
響應式網站需要花費更多的時間，如果項目時間很緊的話，要好好考慮一下。但是多花費的時間會在維護成本中得到彌補。

支持
瀏覽器支持，漸進增強和優雅降級

廣告

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

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

想學響應式設計？來看史上最全的響應式設計資源庫
中國響應式網站分享

Ethan Marcotte博客

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

The SEO of Responsive Web Design

《響應式Web設計實踐》[美]Tim Kadlec著 侯鴻儒 譯

漸進增強和優雅降級之間的有什么不同？

screen sizes

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

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