首先，本文是普通入門知識篇，主要說的是斷點的設定。

很多想接觸響應式的同學都會有以下疑惑：

為什麼要做響應式？ 怎麼入門響應式，是不是很難？ 解析度那麼多，響應式斷點怎麼設定？ 所以本文簡單說下下手響應式的一些基礎，包你入門響應式，沒學會的話再手把手教。

為什麼要學響應式 這個問題呢就跟女神有多面一樣，比喻在家是睡衣，上班是職業裝，團建參加活動什麼的就是休閒運動裝了。網頁呢，對於pc，平板，手機當然也得有不同的打扮排版才吸引使用者，提升體驗。

不然如中國移動手機端的表現是這樣的（整個大小被等比例縮放到適應移動端的device-width），根本沒法提使用者體驗：

中國移動移動端表現

當然還有個更俗的原因就是你要全方位無死角伺候好你的各種平臺的使用者，讓他們用得爽，然後你每個月才有白花花的銀子。

響應式是什麼 簡單來說，響應式就是在不同的解析度下，都要讓內容以最佳的展現形式呈現給你使用者，提升使用者體驗。如下圖：

響應式佈局圖示

具體的響應式站點欣賞可參看：media queries

如何下手響應式 第一步：設定viewport

第二步：設定斷點 斷點也就是我們說的media queries。

在說斷點之前，我們先說下移動的10086服務，一般都會有服務選擇，如按1是話費相關的服務，按2是流量相關的服務，按3是業務辦理方面的服務…然後按0是人工服務。

明白了移動的10086服務，我們現在提出設定響應式斷點的兩大原則：

先規劃好幾個重要斷點如pc，平板，手機（相當於1，2，3…具體的業務） 遇到特殊情況再新增具體的斷點（相當於0鍵的人工服務） 下面我們來規劃下重要的斷點，在此之前，先看下bootstrap 4的斷點設定：

// 預設為手機端樣式

// 等於或大於 34*16 = 544px（手機橫屏） @media (min-width: 34em) { … }

// 等於或大於 48*16 = 768px(平板豎屏) @media (min-width: 48em) { … }

// 等於或大於 62*16 = 992px（pc窄屏） @media (min-width: 62em) { … }

// 等於或大於 75*16 = 1200px（ pc寬屏） @media (min-width: 75em) { … } 這裡再補充一個超大屏斷點，一般用於圖片居多的站點如視訊，購物類站點（單位為em或px都是一樣的）

// pc超大屏 1380px @media (min-width: 1380px) { … } 我們把以上的斷點寫個簡單的demo感受下：響應式斷點設定demo

從以上得出一般要考慮的幾個關鍵斷點分別為：手機橫屏，平板豎屏，pc窄屏，pc寬屏，pc超大屏（比較適合購物商城，視訊類站點），再加上預設的手機樣式就構成了全方位海陸空覆蓋，正好對應上我們設定斷點的第一條規則，主要平臺都涉及了。

這裡我們提出三個問題：

為什麼是min-width，max-width可以不？ 為什麼是這些數字，而不是別的數字？ 為什麼用min-width？ 這裡先說min-width和max-width的區別：min-width表示螢幕最小寬度為多少，也即等於或大於該值，如min-width:768px則表示螢幕要等於或大於768px才會應用該樣式，同理max-width表示最大寬度為多少，也即小於或等於該值。

在做響應式的時候我們一般有個原則叫做是移動優先還是pc優先，bootstrap採用的是移動優先，移動優先的特點是先考慮設計移動的樣式，然後再設定斷點一步步向大尺寸添磚加瓦增加樣式，所以採用min-width（移動端的樣式相對來說都比較簡單，而pc相對來說要複雜點，所以這種順序是樣式由少到多，由簡單到複雜的過程）。反過來如果你的業務是pc優先，那預設是pc的樣式，相容到移動的時候就是由大到小，所以採用max-width（這種方式後面的移動端需要重置覆蓋預設pc上的很多樣式，比較浪費）

為什麼是這些數字？ 至於斷點數字為什麼是這些數字呢？這裡的數字大概有三種，一種是範圍的代表如544px，一種是解析度的代表如768px，一種就是我們佈局主體內容的實際寬度如992px和1200px。為什麼是這三種數字其實跟內容在各個平臺的表現有關。對於pc端，我們一般設定主體內容固定寬度居中，所以就以此作為斷點；而平板豎屏因為寬度比較窄，所以都會全部佔滿空間，所以768px就代表了這個寬度；而544px其實我也不知道到底是某個平板的寬度（這個平板很小）還是某個手機的橫屏寬度，所以我覺得應該是一個範圍，用來界定手機和平板的界限，在這以下都是手機端。（這個問題有知道的請告訴我下，查了很多資料都沒找到）

現在看起來一下明白了，那麼我們是否可以直接拷貝過來使用就可以呢？

怎麼使用這些斷點？ 使用的第一步複製，這個都問題，但是根本不能體現我們業務的特色。所以到底怎麼制定斷點，還有待我們進一步討論，再來兩個問題：

我們的站點要相容到哪些平臺？ 使用者瀏覽器解析度怎麼分佈？ 首先說下第一個問題，大概有五種情況：

第一種只面向pc；第二種pc+平板；第三種平板+手機；第四種只有手機；第五種全相容如個人部落格。

一般內容較小的站點如小公司網站及個人部落格可以採用全相容響應，因為製作成本相對來說比較低，如imweb就是同一內容相容所有平臺；而一些內容非常多，站點比較複雜的則可以採用pc+平板一套內容，手機單獨一套內容，如攜程。

全相容模式一般內容體為流式，可以採用剛才的bootstrap關鍵斷點，再額外增加一些區域性斷點美化頁面以提升體驗；而pc+平板的其實也比較簡單，設定窄屏，寬屏，超大屏即可；最後對於只針對手機的則直接不設定斷點（如果你不想在大屏訪問的時候全屏可以給外圍容器設定一個max-width並居中），但得保證320px/375px/360px下都訪問正常，這就要求對整行容器或者裡面的部分內容進行流式佈局，當然在一些特定的情況也需要額外補充些斷點。（額外增加的斷點，都相當於10086的人工服務，特殊情況下使用）

現在進入我們第二個問題，使用者瀏覽器解析度分步：

做響應式就是為了優化我們使用者的體驗，如果使用者的瀏覽器都在1200px以下，你去做個1380px的超大屏就沒有意思了。所以根據我們使用者的瀏覽器解析度特點制定具體的更有意義的斷點尤其重要，省得做些費時費力又沒有意義的事。如下圖一個站點的pc解析度佔比情況（不包括手機上的資料）：

螢幕解析度佔比

可以看到1024px佔比7%，1200px以上的佔了84%（100%-7%-9%），1380px以上佔比46%。假設這個站點是商城購物型別的，那麼1380px，1200px的斷點比1024的斷點更重要。

最後：斷點的設定跟站點的內容，使用者裝置的解析度，使用者規模和成本計算都息息相關，所以這些都應該考慮進去，而不是盲目的抄來就用。