广泛部署的技术
基于 CSS 的适配
CSS 媒体查询定义了一种机制，允许根据设备的一些特性（尤其是屏幕分辨率）调整网页的布局和行为。
与视口（viewport）相关的CSS单位 vw、vh、vmin 和 vmax 表示当前视口尺寸的百分比，并允许开发者设计自动适应视口尺寸变化的布局。
响应式图像
响应式图像社区组（RICG）开发了对HTML的扩展（picture元素），允许作者根据设备功能和/或其他媒体特性定义要加载的图像。
作为补充，WHATWG指定的srcset属性也可作为HTML的扩展，让Web开发者定义图像的设备像素比，让浏览器选择最适合屏幕像素密度的图片。
SVG可以定义可缩放的图像，而不会造成任何质量损失，这是开发适应多种设备分辨率的Web应用的另一个重要工具。
基于 JS 的适配
Web Components 是一系列将应用逻辑封装在可重用的组件中的技术，其中主要技术包括：
<template>元素允许声明可以通过脚本克隆并插入文档中的 HTML 片段。- 自定义元素为 Web 开发者提供了一种构建自己的功能齐全的 DOM 元素的方法。
- 与 JavaScript 模块系统的集成使 Web 开发者可以利用组件中的 JavaScript 模块。
- 影子 DOM 允许浏览器渲染不包含在主 DOM 文档树中的 DOM 元素。
开发中的技术
基于 CSS 的适配
CSS设备适配定义了一组CSS指令来定义该布局应该基于的尺寸，相对于底层设备的大小——指定<meta name="viewport">元素实现的内容。
CSS 移动文本大小调整让文本适应页面的缩放部分。
媒体查询第四版和第五版添加了一些适应移动环境中的用户界面的相关的特性，包括：
- 通过
pointer（及其配套的any-pointer）的查询指针设备的存在与否及其类型。 - 通过
hover查询设备是否支持悬停功能。 - 通过
prefers-contrast和prefers-color-scheme对环境亮度变化做出反应或遵循用户对亮或暗主题的偏好的能力。 - 通过
prefers-reduced-motion来减少页面中的动画数量，节省电池。 - 对脚本定义的变量做出反应，从而更容易满足应用整体逻辑中更复杂的适配规则。
基于 JS 的适配
以下是可以为 Web Components 设置样式的技术：
- CSS 域使 Web 开发者可以为自定义元素定义默认样式。
- CSS 影子部件允许在影子树中标记元素并在外部页面中修改其样式，从而提供了一种易于使用的机制来根据需要自定义自定义元素的样式。
- 可构造样式表对象提供了一个 API，用于从 JavaScript 脚本创建样式表对象，使向 Web Components 添加样式更加方便和高效。
如元素查询的用例和要求中所述，开发人员需要控制相对于其容器大小的单个元素的布局，以创建适应各种设备和情景的复杂响应式应用。window 上的媒体查询和 resize 事件只允许开发者相对于视口大小调整组件的布局，而元素大小变化观察器定义了一个接口，用于观察元素大小的变化并响应这些变化，允许设计可跨应用和设备的响应式 Web Components。
服务器端适配
媒体捕获功能
媒体捕捉与媒体流 API 开放了一些有关摄像头和麦克风功能的信息，以便利用手机上提供的各种媒体捕获设备。
探索性工作
基于 JS 的适配
大多数移动设备都具有屏幕键盘，也通常让用户能够缩放页面。这两个功能都保留了布局视口（网页在布局其用户界面使用的视口），以免被 position: fixed 的元素弄乱屏幕。Visual Viewport API 为开发人员提供了一种查看可视视口属性（用户当前可见的内容）并与之交互的方法，并在这些属性发生变化时得到通知。
服务器端适配
User-Agent Client Hints 提案定义了一组客户端提示，这些提示为开发者提供了在必要时执行基于用户代理的内容协商（content negotiation）的能力，同时避免了 User-Agent HTTP头的历史包袱并减少了网站追踪用户的可能性，这也是服务器端适配的基础。
| 特性 | 规范 / 小组 | 实现意向选择浏览器… |
|---|---|---|
| 基于 JS 的适配 | 可视视口 API (Visual Viewport API) Web 平台孵化社区组 (Web Platform Incubator Community Group) | |
| 服务器端适配 | User-Agent Client Hints Web 平台孵化社区组 (Web Platform Incubator Community Group) |