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

響應式的適配對象

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

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

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

而學習響應式，首先就要從瀏覽器開始說起。

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

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

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

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

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

通常自適應只區(qū)分桌面端和移動端兩種，較大的門戶、購物、工具類網(wǎng)站，普遍使用自適應模式。因為移動端訪問網(wǎng)頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發(fā)、維護成本。

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

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

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

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

這是因為硬件分辨率和系統(tǒng)渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統(tǒng)的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。

這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數(shù)圖標、文字是無法被看清的，所以默認使用了 2x 的規(guī)格渲染。但這只是其中一個選項，在 HIDPI 技術的加持下，用戶還可以選擇別的分辨率，比如我會進一步調高到 1800*1169。

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

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

所以了解線上案例的響應式布局規(guī)則，或者檢查已經(jīng)開發(fā)好的響應式頁面，并不需要切換不同設備查看，只要拖拽縮放瀏覽器的大?。ㄖ饕菍挾龋┘纯色@得完整的響應效果。

最后總結起來，響應式網(wǎng)頁是面向瀏覽器視圖區(qū)域做適配的布局方法，而不是面向系統(tǒng)、屏幕分辨率的適配，這和自適應布局有本質的差異。

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

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

結尾

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

作者：超人的電話亭