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

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

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

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)式布局只能是流式布局）

注：圖片來源于GEOFF GRAHAM

響應(yīng)式設(shè)計要求更多的代碼，它能夠很好地適應(yīng)所有的屏幕尺寸。
自適應(yīng)設(shè)計只是針對于某幾個特定的尺寸，一旦有新的屏幕尺寸出現(xiàn)，需要增加一些新的代碼。
更加詳細的解釋可以看一下《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)在都是把這兩種布局混合起來使用，剛開始我們是按照幾個主要的屏幕分辨率做出設(shè)計稿，在重構(gòu)過程中是按照響應(yīng)式設(shè)計的特點，確保其能夠在各種屏幕分辨率中都能夠正常顯示。
折衷的方法，確保在主要的分辨率屏幕上的效果與設(shè)計稿完全一致，但是在其他比較次要的分辨率下，很難保持一致，特別是一些采用百分比的元素，所以這時候的對齊只能寄希望于左、右、居中對齊。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

人們與動態(tài)元素的交互有多復雜

增加一個斷點是否能夠提升設(shè)計

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

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

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

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

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

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

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

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

1380px、992px、768px、544px

我所在團隊所設(shè)置的斷點

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

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

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

歡迎大家一起討論。

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

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

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

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

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

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

@media (max-width:1200px)

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

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

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

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

對于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.

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

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

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

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

幾種布局的集合。

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

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

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

body{
    font-size:100%;
}

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

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

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

如果在沒有css預(yù)處理工具之前，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.

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

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

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

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

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

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

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

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

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

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

支持
瀏覽器支持，漸進增強和優(yōu)雅降級

廣告

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

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

想學響應(yīng)式設(shè)計？來看史上最全的響應(yīng)式設(shè)計資源庫
中國響應(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è)計實踐》[美]Tim Kadlec著 侯鴻儒 譯

漸進增強和優(yōu)雅降級之間的有什么不同？

screen sizes

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

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