HTML是一種固有的流動媒介。文本和容器在水平和垂直方向上展開以使用可用空間。這種流動性使復雜的設計變得更加困難，因此在千禧年之初，許多站點都根據流行的屏幕尺寸采用了固定寬度。

　　隨著屏幕尺寸從800×600增加到1024×768甚至更大，該過程仍然可行。但是，智能手機的興起和2007年推出的iPhone扭轉了這一趨勢。如今，超過一半的用戶在較小的移動設備上訪問網頁。

　　注意：從技術上講，智能手機通常比許多顯示器具有更高的分辨率，但是單個像素變得不可見。iPhone 11 Max將其2688 x 1242的硬件分辨率轉換為更實用的896×414邏輯分辨率。每個邏輯像素映射到3×3實際像素的網格，這使字體更平滑并增加了圖像細節。

　　最初的解決方法是兩個站點：一個用于桌面，一個用于移動，通常需要偵聽用戶代理以進行重定向。隨著各種設備呈指數增長，這很快變得不切實際。

　　最后，術語“響應式網頁設計(RWD)”由Ethan Marcotte在2010年提出。該技術使同一個站點可以在任何設備上工作，而不管屏幕尺寸或視口尺寸如何。

　　RWD如何工作?

　　沒有單一的RWD方法或技術。

　　首先，您必須確定站點設計如何對不同尺寸的顯示器做出反應。這是一個挑戰，許多首批RWD網站采用了現有的桌面布局，并隨著屏幕尺寸的減小而刪除了部分內容。

　　更好的技術是移動技術。它始于線性移動視圖，可在所有設備上使用，然后隨著更多空間和受支持的瀏覽器功能可用而重新排列或改編內容。最近，許多站點采用了更簡單的布局，其中移動和桌面體驗基本相似。

　　RWD的典型示例是漢堡菜單。屏幕較小的用戶可以單擊圖標來查看導航鏈接，而屏幕較大的用戶可以在水平列表中查看所有選項。

　　以下各節提供了許多技術實施選項。

　　HTML viewport元標記

　　無論采用哪種RWD技術，都必須在HTML中設置以下標記：

　　該width=device-width設置可確保移動瀏覽器將邏輯CSS像素縮放到屏幕的寬度。否則，瀏覽器將假定它正在呈現一個桌面站點并相應地縮放它，以便可以對其進行平移和縮放。

　　媒體查詢

　　媒體查詢是第一個RWD網站的主要基礎。它們允許CSS定位視口尺寸的特定范圍。例如：

　　/* styles applied to all views */p {font-size: 1rem;} /* styles applied to viewports with a width between 900px and 1200px */ @media (min-width: 900px) and (max-width: 1200px) {p {font-size: 1.5rem;} }

　　盡管現在可以使用不太明確的選項，但仍使用媒體查詢。

　　元素

　　HTML元素使用媒體查詢語法從多個選項中控制顯示哪個圖像。這通常用于藝術指導，以顯示適合設備視口的圖像。例如：

　　CSS視口單位

　　的vw和vhCSS單元分別表示視口的高度和寬度的1%。vmin是最小尺寸的vmax1%，是最大尺寸的1%。

　　這些允許RWD靈活性，特別是與結合使用時calc。例如：

　　/* font size increases with viewport width */ p { font-size: 1rem + 0.5vw; }

　　CSS列

　　CSS多列布局提供了一種隨著容器尺寸增加而創建多個文本列的方法。例如：

　　/* columns must be a minimum width of 12rem with a gap of 2rem between each */ .container { columns: 12rem auto; column-gap: 2rem; }

　　CSS Flexbox和網格

　　CSS Flexbox和CSS Grid提供了現代技術，可根據子元素的內容和可用空間對子元素進行布局。主要區別：

　　Flexbox用于一維布局。元素可以根據需要包裝(或不包裝)到下一行，因此列可能不對齊。

　　網格用于二維布局，通常具有可識別的行和列。

　　可以用來創建內部布局。本質上，無需視媒體查詢即可根據視口尺寸調整元素的大小。例如：

　　.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1rem;}

　　JavaScript RWD選項

　　JavaScript也可以用于確定視口尺寸并做出相應的反應。例如：

　　// get viewport width and heightconstvw = window.innerWidth,vh = window.innerHeight;

　　類似地，盡管getBoundingClientRect()方法可以返回更多信息，包括像素的分數，但是可以使用offsetWidth和offsetHeight檢查單個元素的尺寸：

　　const element = document.getElementById('myelement'),rect = element.getBoundingClientRect(),ew = rect.width,eh = rect.height;

　　窗口和元素的尺寸可以隨著設備旋轉或調整瀏覽器窗口的大小而改變。該matchMediaAPI可以解析CSS媒體查詢并觸發更改事件：

　　// media queryconst mql = window.matchMedia('(min-width: 600px)');// initial check mqTest(mql); // call mqTest when media query changes mql.addListener(mqTest); // media query testing function function mqTest(e) { if (e.matches) { console.log('viewport is at least 600px width'); } else { console.log('viewport is less than 600px width'); }}

　　瀏覽器支持

　　首先，RWD技術提供了良好的瀏覽器支持。當前使用的最新瀏覽器中，有近95%支持最新的CSS網格選項。但是，仍然有必要在各種設備，分辨率和瀏覽器上測試您的網站……

　　瀏覽器內測試

　　調整瀏覽器窗口的大小是幾個小時的合理測試策略，但是它很快變得不準確且麻煩。大多數瀏覽器都提供了響應式設計模式，使您可以選擇設備和用戶代理，對其進行旋轉，選擇分辨率，更改像素密度，調節帶寬，模擬觸摸并拍攝屏幕截圖。

　　在Firefox中，從Web Developer菜單中選擇“響應式設計模式”或按Ctrl|Cmd+Shift+M。

　　在基于Chromium的瀏覽器中，從“更多工具”菜單中打開“開發者”工具，或按Ctrl|Cmd+Shift+I，然后單擊切換設備工具欄圖標，切換回瀏覽器選項卡以查看調整大小的站點。

　　在Safari中，從瀏覽器“偏好設置”的“高級”標簽中啟用“在菜單欄中顯示開發菜單”選項。加載頁面，然后從“開發”菜單中選擇“進入響應設計模式” 。

　　但是，請注意，這些工具僅模仿設備的屏幕尺寸和用戶代理。他們無法準確模擬以下內容：

　　渲染能力瀏覽器將使用其自己的呈現引擎-而不是模擬設備的呈現引擎。Firefox的CSS功能可以在其模擬的iPhone視圖上“工作”，而無需實際支持。也就是說，Chrome桌面將顯示出與Android Chrome相當的近似值，而macOS Safari將類似于iPhone，因為它們基于相同的渲染引擎。

　　較舊的設備在最新版本的Safari上測試iPhone瀏覽器視圖無法正確表示具有舊版操作系統和軟件的舊設備。

　　高密度顯示器您僅限于PC顯示器的物理像素，因此，在實際設備上，網站看起來可能會更好或更糟。

　　觸摸與具有小顯示屏的觸摸屏設備相比，鼠標或觸控板具有更好的控制。可能無法查看懸停效果。

　　處理速度您的PC可能比移動設備具有更快的網絡和處理速度。

　　移動操作系統模擬器

　　在設備上運行Android或iOS虛擬機可讓您安裝和運行真正的移動瀏覽器并使用其實際渲染引擎。

　　Android模擬器包括：

　　Genymotion：免費和商業，適用于Windows，macOS和Linux的所有Android版本

　　Android Studio：免費，Windows，macOS和Linux

　　Visual Studio Xamarin：商業，Windows和macOS

　　Bliss OS：免費，適用于Windows，Linux和Chrome OS的Android 9

　　Phoenix OS：免費，適用于Windows和macOS的Android 7.1或5.1

　　Android-x86：適用于任何虛擬機平臺的免費Android ISO。

　　Chrome是Android上明顯的瀏覽器選擇，但您也可以安裝Opera Mini，這在低功率功能手機上很顯眼。

　　iOS的選項更為有限：

　　Apple Xcode：商業，macOS

　　Electric Mobile Studio：商業，Windows

　　iPadian模擬器：商業，Windows

　　這些仿真器仍有缺點：

　　該軟件需要一定的技術知識，并占用大量系統資源。

　　許多iOS選項都是模擬器。它們會改用其他渲染引擎，并且不一定總是準確的。

　　在線測試服務

　　幾種在線服務使您可以通過Web在移動瀏覽器上測試響應頁面。本質上，您在真實設備上租用時間，并且可以在瀏覽器中查看其屏幕。沒有要設置或維護的軟件。

　　除實時測試外，某些服務還包括自動測試API，使您可以運行腳本并檢查樣式回歸或損壞的用戶界面。

　　LambdaTest提供了2,000多種設備，操作系統和瀏覽器的組合。功能包括：

　　測試localhost開發PC上運行的頁面

　　使用集成的開發人員工具進行調試

　　來自不同位置的地理位置測試

　　在多個設備上自動生成的全屏屏幕截圖

　　內置的問題跟蹤器

　　LT瀏覽器軟件(Windows，macOS，Linux)通過自動重新加載和滾動同步來測試和比較設備

　　基于硒的自動化測試API

　　24/7支持

　　真實設備測試

　　最后，沒有替代品可以在真實設備上進行測試。這是評估實際處理速度，觸摸控制和網站的自適應網頁設計的最佳方法。

　　理想情況下，您應該測試盡可能多的設備，但是您自己的最新智能手機可能并不代表平均硬件水平。嘗試獲得一兩年之久的中檔設備，例如二手Moto G7或iPhone 8。

　　在同一網絡上的設備可以通過在瀏覽器中輸入PC的IP地址來訪問PC的服務器。這可以ifconfig在macOS和Linux或ipconfigWindows上獲得。

　　您也可以使用USB電纜將智能手機連接到PC。這使您可以遠程控制設備并輕松訪問其開發人員工具面板以進行調試。該技術因平臺而異，但是要在桌面版瀏覽器上調試Android Chrome，請執行以下操作：

　　在Android設備上，從設置中選擇開發者選項，然后啟用USB調試。

　　使用適當的USB電纜將設備連接到計算機。首次嘗試執行此操作時，系統可能會提示您確認一個或兩個設備上的操作。

　　在您的PC上啟動Chrome并打開 在新標簽頁中。確保啟用“發現USB設備”。

　　(可選)設置端口轉發-例如，8888可以將遠程設備上的端口轉發到localhost:8888。

　　您的設備應出現在列表中。現在，您可以檢查新的或現有的標簽，該標簽會打開設備的開發人員工具。

　　要調試iPhone的Safari，請執行以下操作：

　　將手機連接到Apple計算機。

　　在您的iPhone的Safari中打開要調試的網頁。

　　在計算機上啟動Safari。

　　在計算機上的Safari中，轉到開發> [您的iPhone] > [要檢查的網站]。這將在您的計算機上打開Safari的開發人員工具，使您可以在iPhone上調試網站。

　　一個站點，多個視圖

　　響應式網頁設計技術使您可以創建一個網站，無論技術限制和邊界如何，任何人都可以在任何設備上查看該網站。使其具有出色的用戶體驗是另一回事，但是測試工具的范圍和功能仍在不斷提高。