HTML是固有的流动媒介。在水平和垂直方向上展开文本和容器，使用可用空间。这种流动性使得复杂的设计更加困难，因此在千禧年初，许多网站根据流行的屏幕尺寸采用固定宽度。

屏幕尺寸从8000开始×600增加到1024×768甚至更大，过程仍然可行。然而，2007年智能手机的兴起和推出iPhone扭转这一趋势。如今，超过一半的用户在较小的移动设备上访问网页。

注：从技术上讲，智能手机的分辨率通常高于许多显示器，但单个像素变得不可见。iPhone 11 Max将其2688 x 1242硬件分辨率转换为更实用的896×414逻辑分辨率。每个逻辑像素映射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) {font-size: 1.5rem;}}

尽管现在可以使用不明确的选项，但仍使用媒体查询。

元素

HTML使用媒体查询语法控制从多个选项中显示的图像。

元素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用于一维布局。主要区别：
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网格选项。近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和LinuxVisual Studio Xamarin：商业，Windows和macOSBliss OS：免费，适合Windows，Linux和Chrome OS的Android 9Phoenix OS：免费，适合Windows和macOS的Android 7.1或5.1Android-x86:免费适用于任何虚拟机平台Android ISO。
Chrome是Android有明显的浏览器选择，但也可以安装Opera Mini，这在低功率功能手机上非常显眼。
iOS选项更有限：
Apple Xcode：商业，macOSElectric Mobile Studio：商业，WindowsiPadian模拟器：商业，Windows
这些仿真器仍有缺点：
该软件需要一定的技术知识，并占用大量的系统资源。
iOS选项更有限：
Apple Xcode：商业，macOSElectric Mobile Studio：商业，WindowsiPadian模拟器：商业，Windows
这些仿真器仍有缺点：
该软件需要一定的技术知识，并占用大量的系统资源。iOS选项都是模拟器。它们将使用其他渲染引擎，并不总是准确的。在线测试服务
通过几种在线服务，您可以通过在线服务Web测试移动浏览器上的响应页面。本质上，您可以在真实设备上租用时间，并在浏览器中查看其屏幕。软件不需要设置或维护。
除实时测试外，一些服务还包括自动测试API，使您能够操作脚本并检查样式返回或损坏的用户界面。LambdaTest提供2000多种设备，操作系统和浏览器的组合。功能包括：测试localhost开发PC上面运行的页面使用集成的开发人员工具来调试来自不同位置的地理位置，并在多个设备上自动生成全屏截图的内置问题跟踪器LT浏览器软件（Windows，macOS，Linux）基于硒的自动化测试通过自动重新加载和滚动同步进行测试和比较API24/7支持真实设备测试最后，真实设备上没有替代品可以测试。这是评估实际处理速度、触摸控制和网站自适应网页设计的最佳方法。这是评估实际处理速度、触摸控制和网站自适应网页设计的最佳方法。理想情况下，你应该尽可能多地测试设备，但你最新的智能手机可能并不意味着平均硬件水平。尝试获得一两年的中档设备，如二手设备Moto G7或iPhone 8。通过在浏览器中输入在同一网络上的设备PC的IP地址来访问PC的服务器。这可以ifconfig在macOS和Linux或ipconfigW
in