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

　　隨著屏幕尺寸從800×600增加到1024×768甚至更大，該過(guò)程仍然可行。但是，智能手機(jī)的興起和2007年推出的iPhone扭轉(zhuǎn)了這一趨勢(shì)。如今，超過(guò)一半的用戶(hù)在較小的移動(dòng)設(shè)備上訪(fǎng)問(wèn)網(wǎng)頁(yè)。

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

　　最初的解決方法是兩個(gè)站點(diǎn)：一個(gè)用于桌面，一個(gè)用于移動(dòng)，通常需要偵聽(tīng)用戶(hù)代理以進(jìn)行重定向。隨著各種設(shè)備呈指數(shù)增長(zhǎng)，這很快變得不切實(shí)際。

　　最后，術(shù)語(yǔ)“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD)”由Ethan Marcotte在2010年提出。該技術(shù)使同一個(gè)站點(diǎn)可以在任何設(shè)備上工作，而不管屏幕尺寸或視口尺寸如何。

　　RWD如何工作?

　　沒(méi)有單一的RWD方法或技術(shù)。

　　首先，您必須確定站點(diǎn)設(shè)計(jì)如何對(duì)不同尺寸的顯示器做出反應(yīng)。這是一個(gè)挑戰(zhàn)，許多首批RWD網(wǎng)站采用了現(xiàn)有的桌面布局，并隨著屏幕尺寸的減小而刪除了部分內(nèi)容。

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

　　RWD的典型示例是漢堡菜單。屏幕較小的用戶(hù)可以單擊圖標(biāo)來(lái)查看導(dǎo)航鏈接，而屏幕較大的用戶(hù)可以在水平列表中查看所有選項(xiàng)。

　　以下各節(jié)提供了許多技術(shù)實(shí)施選項(xiàng)。

　　HTML viewport元標(biāo)記

　　無(wú)論采用哪種RWD技術(shù)，都必須在HTML中設(shè)置以下標(biāo)記：

　　該width=device-width設(shè)置可確保移動(dòng)瀏覽器將邏輯CSS像素縮放到屏幕的寬度。否則，瀏覽器將假定它正在呈現(xiàn)一個(gè)桌面站點(diǎn)并相應(yīng)地縮放它，以便可以對(duì)其進(jìn)行平移和縮放。

　　媒體查詢(xún)

　　媒體查詢(xún)是第一個(gè)RWD網(wǎng)站的主要基礎(chǔ)。它們?cè)试SCSS定位視口尺寸的特定范圍。例如：

　　/* 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;} }

　　盡管現(xiàn)在可以使用不太明確的選項(xiàng)，但仍使用媒體查詢(xún)。

　　元素

　　HTML元素使用媒體查詢(xún)語(yǔ)法從多個(gè)選項(xiàng)中控制顯示哪個(gè)圖像。這通常用于藝術(shù)指導(dǎo)，以顯示適合設(shè)備視口的圖像。例如：

　　CSS視口單位

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

　　這些允許RWD靈活性，特別是與結(jié)合使用時(shí)calc。例如：

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

　　CSS列

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

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

　　CSS Flexbox和網(wǎng)格

　　CSS Flexbox和CSS Grid提供了現(xiàn)代技術(shù)，可根據(jù)子元素的內(nèi)容和可用空間對(duì)子元素進(jìn)行布局。主要區(qū)別：

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

　　網(wǎng)格用于二維布局，通常具有可識(shí)別的行和列。

　　可以用來(lái)創(chuàng)建內(nèi)部布局。本質(zhì)上，無(wú)需視媒體查詢(xún)即可根據(jù)視口尺寸調(diào)整元素的大小。例如：

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

　　JavaScript RWD選項(xiàng)

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

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

　　類(lèi)似地，盡管getBoundingClientRect()方法可以返回更多信息，包括像素的分?jǐn)?shù)，但是可以使用offsetWidth和offsetHeight檢查單個(gè)元素的尺寸：

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

　　窗口和元素的尺寸可以隨著設(shè)備旋轉(zhuǎn)或調(diào)整瀏覽器窗口的大小而改變。該matchMediaAPI可以解析CSS媒體查詢(xún)并觸發(fā)更改事件：

　　// 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技術(shù)提供了良好的瀏覽器支持。當(dāng)前使用的最新瀏覽器中，有近95%支持最新的CSS網(wǎng)格選項(xiàng)。但是，仍然有必要在各種設(shè)備，分辨率和瀏覽器上測(cè)試您的網(wǎng)站……

　　瀏覽器內(nèi)測(cè)試

　　調(diào)整瀏覽器窗口的大小是幾個(gè)小時(shí)的合理測(cè)試策略，但是它很快變得不準(zhǔn)確且麻煩。大多數(shù)瀏覽器都提供了響應(yīng)式設(shè)計(jì)模式，使您可以選擇設(shè)備和用戶(hù)代理，對(duì)其進(jìn)行旋轉(zhuǎn)，選擇分辨率，更改像素密度，調(diào)節(jié)帶寬，模擬觸摸并拍攝屏幕截圖。

　　在Firefox中，從Web Developer菜單中選擇“響應(yīng)式設(shè)計(jì)模式”或按Ctrl|Cmd+Shift+M。

　　在基于Chromium的瀏覽器中，從“更多工具”菜單中打開(kāi)“開(kāi)發(fā)者”工具，或按Ctrl|Cmd+Shift+I，然后單擊切換設(shè)備工具欄圖標(biāo)，切換回瀏覽器選項(xiàng)卡以查看調(diào)整大小的站點(diǎn)。

　　在Safari中，從瀏覽器“偏好設(shè)置”的“高級(jí)”標(biāo)簽中啟用“在菜單欄中顯示開(kāi)發(fā)菜單”選項(xiàng)。加載頁(yè)面，然后從“開(kāi)發(fā)”菜單中選擇“進(jìn)入響應(yīng)設(shè)計(jì)模式” 。

　　但是，請(qǐng)注意，這些工具僅模仿設(shè)備的屏幕尺寸和用戶(hù)代理。他們無(wú)法準(zhǔn)確模擬以下內(nèi)容：

　　渲染能力瀏覽器將使用其自己的呈現(xiàn)引擎-而不是模擬設(shè)備的呈現(xiàn)引擎。Firefox的CSS功能可以在其模擬的iPhone視圖上“工作”，而無(wú)需實(shí)際支持。也就是說(shuō)，Chrome桌面將顯示出與Android Chrome相當(dāng)?shù)慕浦?，而macOS Safari將類(lèi)似于iPhone，因?yàn)樗鼈兓谙嗤匿秩疽妗?/p>

　　較舊的設(shè)備在最新版本的Safari上測(cè)試iPhone瀏覽器視圖無(wú)法正確表示具有舊版操作系統(tǒng)和軟件的舊設(shè)備。

　　高密度顯示器您僅限于PC顯示器的物理像素，因此，在實(shí)際設(shè)備上，網(wǎng)站看起來(lái)可能會(huì)更好或更糟。

　　觸摸與具有小顯示屏的觸摸屏設(shè)備相比，鼠標(biāo)或觸控板具有更好的控制?？赡軣o(wú)法查看懸停效果。

　　處理速度您的PC可能比移動(dòng)設(shè)備具有更快的網(wǎng)絡(luò)和處理速度。

　　移動(dòng)操作系統(tǒng)模擬器

　　在設(shè)備上運(yùn)行Android或iOS虛擬機(jī)可讓您安裝和運(yùn)行真正的移動(dòng)瀏覽器并使用其實(shí)際渲染引擎。

　　Android模擬器包括：

　　Genymotion：免費(fèi)和商業(yè)，適用于Windows，macOS和Linux的所有Android版本

　　Android Studio：免費(fèi)，Windows，macOS和Linux

　　Visual Studio Xamarin：商業(yè)，Windows和macOS

　　Bliss OS：免費(fèi)，適用于Windows，Linux和Chrome OS的Android 9

　　Phoenix OS：免費(fèi)，適用于Windows和macOS的Android 7.1或5.1

　　Android-x86：適用于任何虛擬機(jī)平臺(tái)的免費(fèi)Android ISO。

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

　　iOS的選項(xiàng)更為有限：

　　Apple Xcode：商業(yè)，macOS

　　Electric Mobile Studio：商業(yè)，Windows

　　iPadian模擬器：商業(yè)，Windows

　　這些仿真器仍有缺點(diǎn)：

　　該軟件需要一定的技術(shù)知識(shí)，并占用大量系統(tǒng)資源。

　　許多iOS選項(xiàng)都是模擬器。它們會(huì)改用其他渲染引擎，并且不一定總是準(zhǔn)確的。

　　在線(xiàn)測(cè)試服務(wù)

　　幾種在線(xiàn)服務(wù)使您可以通過(guò)Web在移動(dòng)瀏覽器上測(cè)試響應(yīng)頁(yè)面。本質(zhì)上，您在真實(shí)設(shè)備上租用時(shí)間，并且可以在瀏覽器中查看其屏幕。沒(méi)有要設(shè)置或維護(hù)的軟件。

　　除實(shí)時(shí)測(cè)試外，某些服務(wù)還包括自動(dòng)測(cè)試API，使您可以運(yùn)行腳本并檢查樣式回歸或損壞的用戶(hù)界面。

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

　　測(cè)試localhost開(kāi)發(fā)PC上運(yùn)行的頁(yè)面

　　使用集成的開(kāi)發(fā)人員工具進(jìn)行調(diào)試

　　來(lái)自不同位置的地理位置測(cè)試

　　在多個(gè)設(shè)備上自動(dòng)生成的全屏屏幕截圖

　　內(nèi)置的問(wèn)題跟蹤器

　　LT瀏覽器軟件(Windows，macOS，Linux)通過(guò)自動(dòng)重新加載和滾動(dòng)同步來(lái)測(cè)試和比較設(shè)備

　　基于硒的自動(dòng)化測(cè)試API

　　24/7支持

　　真實(shí)設(shè)備測(cè)試

　　最后，沒(méi)有替代品可以在真實(shí)設(shè)備上進(jìn)行測(cè)試。這是評(píng)估實(shí)際處理速度，觸摸控制和網(wǎng)站的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的最佳方法。

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

　　在同一網(wǎng)絡(luò)上的設(shè)備可以通過(guò)在瀏覽器中輸入PC的IP地址來(lái)訪(fǎng)問(wèn)PC的服務(wù)器。這可以ifconfig在macOS和Linux或ipconfigWindows上獲得。

　　您也可以使用USB電纜將智能手機(jī)連接到PC。這使您可以遠(yuǎn)程控制設(shè)備并輕松訪(fǎng)問(wèn)其開(kāi)發(fā)人員工具面板以進(jìn)行調(diào)試。該技術(shù)因平臺(tái)而異，但是要在桌面版瀏覽器上調(diào)試Android Chrome，請(qǐng)執(zhí)行以下操作：

　　在Android設(shè)備上，從設(shè)置中選擇開(kāi)發(fā)者選項(xiàng)，然后啟用USB調(diào)試。

　　使用適當(dāng)?shù)腢SB電纜將設(shè)備連接到計(jì)算機(jī)。首次嘗試執(zhí)行此操作時(shí)，系統(tǒng)可能會(huì)提示您確認(rèn)一個(gè)或兩個(gè)設(shè)備上的操作。

　　在您的PC上啟動(dòng)Chrome并打開(kāi) 在新標(biāo)簽頁(yè)中。確保啟用“發(fā)現(xiàn)USB設(shè)備”。

　　(可選)設(shè)置端口轉(zhuǎn)發(fā)-例如，8888可以將遠(yuǎn)程設(shè)備上的端口轉(zhuǎn)發(fā)到localhost:8888。

　　您的設(shè)備應(yīng)出現(xiàn)在列表中。現(xiàn)在，您可以檢查新的或現(xiàn)有的標(biāo)簽，該標(biāo)簽會(huì)打開(kāi)設(shè)備的開(kāi)發(fā)人員工具。

　　要調(diào)試iPhone的Safari，請(qǐng)執(zhí)行以下操作：

　　將手機(jī)連接到Apple計(jì)算機(jī)。

　　在您的iPhone的Safari中打開(kāi)要調(diào)試的網(wǎng)頁(yè)。

　　在計(jì)算機(jī)上啟動(dòng)Safari。

　　在計(jì)算機(jī)上的Safari中，轉(zhuǎn)到開(kāi)發(fā)> [您的iPhone] > [要檢查的網(wǎng)站]。這將在您的計(jì)算機(jī)上打開(kāi)Safari的開(kāi)發(fā)人員工具，使您可以在iPhone上調(diào)試網(wǎng)站。

　　一個(gè)站點(diǎn)，多個(gè)視圖

　　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)使您可以創(chuàng)建一個(gè)網(wǎng)站，無(wú)論技術(shù)限制和邊界如何，任何人都可以在任何設(shè)備上查看該網(wǎng)站。使其具有出色的用戶(hù)體驗(yàn)是另一回事，但是測(cè)試工具的范圍和功能仍在不斷提高。