最近重新更新一下 B 端響應(yīng)式相關(guān)的內(nèi)容，幫助已經(jīng)初步掌握的同學(xué)重新鞏固，還沒(méi)學(xué)會(huì)的同學(xué)快速入門。

響應(yīng)式的適配對(duì)象

響應(yīng)式是一種網(wǎng)頁(yè)前端技術(shù)，讓網(wǎng)頁(yè)可以根據(jù)分辨率、設(shè)備的變更，自動(dòng)調(diào)整樣式和布局。

它的誕生起源于移動(dòng)互聯(lián)網(wǎng)興起的熱潮，彼時(shí)智能手機(jī)訪問(wèn)網(wǎng)站的需求激增，但多數(shù)網(wǎng)站的適配都是面向電腦端的大屏幕，僅有少數(shù)網(wǎng)站會(huì)額外開發(fā)符合移動(dòng)端顯示需求的版本（自適應(yīng)）。

響應(yīng)式的提出，就是為了解決這種問(wèn)題，通過(guò)建立一套約定好的設(shè)計(jì)、開發(fā)方法，用一套代碼自動(dòng)適配臺(tái)式電腦、筆記本、平板、移動(dòng)端等各種設(shè)備，提高網(wǎng)站的兼容性和開發(fā)效率。

而學(xué)習(xí)響應(yīng)式，首先就要從瀏覽器開始說(shuō)起。

瀏覽器是一個(gè)非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們?nèi)粘ＴL問(wèn)的所有網(wǎng)頁(yè)，都需要通過(guò)瀏覽器加載并渲染出最終的樣式。

可以把網(wǎng)頁(yè) Html 文件理解成是一個(gè)程序，而瀏覽器就是運(yùn)行這個(gè)程序的系統(tǒng)（環(huán)境），也就是說(shuō)解析網(wǎng)頁(yè)依靠的是瀏覽器而不是 Windows、Mac、iOS、AndROId、Linux 等客戶端系統(tǒng)。

瀏覽器即系統(tǒng)中的系統(tǒng)（類似虛擬機(jī))，不管在任何系統(tǒng)或設(shè)備上，只要安裝了瀏覽器，就可以用大體相同的規(guī)則、邏輯去加載、渲染出網(wǎng)頁(yè)。

但不同設(shè)備的屏幕有很大差異，網(wǎng)頁(yè)如何識(shí)別并匹配這些設(shè)備呢？

方法主要有兩種，第一種是瀏覽器會(huì)識(shí)別當(dāng)前系統(tǒng)和設(shè)備，并提供接口讓網(wǎng)頁(yè)讀取。而部分網(wǎng)站會(huì)準(zhǔn)備多種規(guī)格的網(wǎng)頁(yè)，根據(jù)獲取的設(shè)備類型推送對(duì)應(yīng)的規(guī)格，這種做法叫做自適應(yīng)模式。

通常自適應(yīng)只區(qū)分桌面端和移動(dòng)端兩種，較大的門戶、購(gòu)物、工具類網(wǎng)站，普遍使用自適應(yīng)模式。因?yàn)橐苿?dòng)端訪問(wèn)網(wǎng)頁(yè)的需求并不高，所以會(huì)對(duì)移動(dòng)端版本做大量的精簡(jiǎn)，降低開發(fā)、維護(hù)成本。

另一種方法，則是讀取瀏覽器視圖區(qū)域的分辨率。任何瀏覽器的界面，都包含功能區(qū)域和視圖區(qū)域兩個(gè)部分，功能區(qū)域提供相關(guān)的軟件菜單、操作按鈕，視圖區(qū)域則是顯示網(wǎng)頁(yè)界面的區(qū)域。隨著設(shè)備和屏幕分辨率的變化，瀏覽器的大小也會(huì)不同，網(wǎng)頁(yè)視圖區(qū)域也會(huì)跟著縮放。

網(wǎng)頁(yè)視圖注定小于整個(gè)瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統(tǒng)中的尺寸不等于系統(tǒng)分辨率（或設(shè)備分辨率），一方面有系統(tǒng)的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調(diào)整。

所以響應(yīng)式網(wǎng)頁(yè)就是根據(jù)瀏覽器的視圖區(qū)域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設(shè)備、系統(tǒng)中打開，本質(zhì)上都只是顯示區(qū)域大小的變更。而在瀏覽器的檢查選項(xiàng)中，模擬不同的設(shè)備其實(shí)就是縮放出一個(gè)指定的視圖窗口出來(lái)。

這種依賴關(guān)系延伸出一個(gè)新的知識(shí)點(diǎn)，即網(wǎng)頁(yè)顯示的分辨率，和顯示設(shè)備的屏幕分辨率，是兩套不同的體系。

這是因?yàn)橛布直媛屎拖到y(tǒng)渲染的分辨率是兩個(gè)概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統(tǒng)的屏幕分辨率選擇中，默認(rèn)的卻是 1512*982（即原來(lái)的 1/2）。

這是因?yàn)橛布直媛侍吡耍?:1 渲染的話，那么大多數(shù)圖標(biāo)、文字是無(wú)法被看清的，所以默認(rèn)使用了 2x 的規(guī)格渲染。但這只是其中一個(gè)選項(xiàng)，在 HIDPI 技術(shù)的加持下，用戶還可以選擇別的分辨率，比如我會(huì)進(jìn)一步調(diào)高到 1800*1169。

在 Windows 系統(tǒng)中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內(nèi)容，會(huì)在系統(tǒng)中設(shè)置 120%、150% 的放大效果，等于為系統(tǒng)分辨率做出變更。

說(shuō)到底，系統(tǒng)顯示分辨率的規(guī)格也是無(wú)窮無(wú)盡的。但是不管外部的轉(zhuǎn)換邏輯有多復(fù)雜，規(guī)格有多少，都和響應(yīng)式網(wǎng)頁(yè)無(wú)關(guān)，它只需要認(rèn)準(zhǔn)瀏覽器的視圖區(qū)域分辨率即可。

所以了解線上案例的響應(yīng)式布局規(guī)則，或者檢查已經(jīng)開發(fā)好的響應(yīng)式頁(yè)面，并不需要切換不同設(shè)備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應(yīng)效果。

最后總結(jié)起來(lái)，響應(yīng)式網(wǎng)頁(yè)是面向?yàn)g覽器視圖區(qū)域做適配的布局方法，而不是面向系統(tǒng)、屏幕分辨率的適配，這和自適應(yīng)布局有本質(zhì)的差異。

在 B 端領(lǐng)域，絕大多數(shù)項(xiàng)目都只部分兼容響應(yīng)式，放棄移動(dòng)端的適配，即使支持移動(dòng)端也是使用自適應(yīng)的混合模式。要面對(duì)這些復(fù)雜的場(chǎng)景，就月需要理解上面這些基礎(chǔ)的概念，否則設(shè)計(jì)師就無(wú)法真正滿足響應(yīng)式項(xiàng)目的前期創(chuàng)建和后期交付需要。

在下一章，我們將進(jìn)入響應(yīng)式規(guī)則的具體解析和實(shí)例講解。

結(jié)尾

解釋響應(yīng)式的內(nèi)容很麻煩，所以剩下的要后面才能發(fā)完。重新梳理的內(nèi)容會(huì)進(jìn)一步細(xì)化梳理到 uxbaike 里，而這個(gè)新知識(shí)庫(kù)除了響應(yīng)式以外，還會(huì)包含移動(dòng)端、平板，iOS、Android、小程序的適配規(guī)則。

作者：超人的電話亭