響應式是一種網頁前端技術，讓網頁可以根據分辨率、設備的變更，自動調整樣式和布局。
它的誕生起源于移動互聯網興起的熱潮，彼時智能手機訪問網站的需求激增，但多數網站的適配都是面向電腦端的大屏幕，僅有少數網站會額外開發符合移動端顯示需求的版本（自適應）。
響應式的提出，就是為了解決這種問題，通過建立一套約定好的設計、開發方法，用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備，提高網站的兼容性和開發效率。
而學習響應式，首先就要從瀏覽器開始說起。
瀏覽器是一個非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們日常訪問的所有網頁，都需要通過瀏覽器加載并渲染出最終的樣式。
可以把網頁 HTML 文件理解成是一個程序，而瀏覽器就是運行這個程序的系統（環境），也就是說解析網頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統。
瀏覽器即系統中的系統（類似虛擬機)，不管在任何系統或設備上，只要安裝了瀏覽器，就可以用大體相同的規則、邏輯去加載、渲染出網頁。
但不同設備的屏幕有很大差異，網頁如何識別并匹配這些設備呢？
方法主要有兩種，第一種是瀏覽器會識別當前系統和設備，并提供接口讓網頁讀取。而部分網站會準備多種規格的網頁，根據獲取的設備類型推送對應的規格，這種做法叫做自適應模式。
通常自適應只區分桌面端和移動端兩種，較大的門戶、購物、工具類網站，普遍使用自適應模式。因為移動端訪問網頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發、維護成本。
另一種方法，則是讀取瀏覽器視圖區域的分辨率。任何瀏覽器的界面，都包含功能區域和視圖區域兩個部分，功能區域提供相關的軟件菜單、操作按鈕，視圖區域則是顯示網頁界面的區域。隨著設備和屏幕分辨率的變化，瀏覽器的大小也會不同，網頁視圖區域也會跟著縮放。
網頁視圖注定小于整個瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統中的尺寸不等于系統分辨率（或設備分辨率），一方面有系統的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調整。
所以響應式網頁就是根據瀏覽器的視圖區域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設備、系統中打開，本質上都只是顯示區域大小的變更。而在瀏覽器的檢查選項中，模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。
這種依賴關系延伸出一個新的知識點，即網頁顯示的分辨率，和顯示設備的屏幕分辨率，是兩套不同的體系。
這是因為硬件分辨率和系統渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。
這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數圖標、文字是無法被看清的，所以默認使用了 2x 的規格渲染。但這只是其中一個選項，在 HIDPI 技術的加持下，用戶還可以選擇別的分辨率，比如我會進一步調高到 1800*1169。
在 Windows 系統中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內容，會在系統中設置 120%、150% 的放大效果，等于為系統分辨率做出變更。
說到底，系統顯示分辨率的規格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜，規格有多少，都和響應式網頁無關，它只需要認準瀏覽器的視圖區域分辨率即可。
所以了解線上案例的響應式布局規則，或者檢查已經開發好的響應式頁面，并不需要切換不同設備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應效果。
最后總結起來，響應式網頁是面向瀏覽器視圖區域做適配的布局方法，而不是面向系統、屏幕分辨率的適配，這和自適應布局有本質的差異。
在 B 端領域，絕大多數項目都只部分兼容響應式，放棄移動端的適配，即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景，就月需要理解上面這些基礎的概念，否則設計師就無法真正滿足響應式項目的前期創建和后期交付需要。
轉載：優設
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
