简化的响应式设计模式

响应式设计是一种成熟的做法，用于创建适应不同屏幕尺寸的设计。为单一屏幕尺寸创建新网站的日子一去不复返了。如今的设备分辨率五花八门，从适合手腕的屏幕到手持或放在腿上的屏幕，甚至还有环绕您整个视野的虚拟屏幕。

如今屏幕尺寸如此之多，以至于针对特定分辨率集进行设计几乎毫无意义。相反，我们正在使用功能强大的现代布局工具，如容器查询 (Container Queries)、网格 (Grid) 和弹性盒子 (Flexbox) 来创建流畅的布局，使设计能够适应任何屏幕尺寸。

创建弹性、自适应的设计需要工具来帮助您快速探索各种分辨率下的布局。Safari 中的响应式设计模式 (Responsive Design Mode) 正是为此而生。它能让您实时快速预览网页布局如何适应不同的视口尺寸和宽高比。

作为开发者工具套件的一部分，当您在 Safari 的“高级”设置中启用“显示网页开发者功能”时，响应式设计模式即可使用。启用后，您可以通过从“开发”菜单中选择“进入响应式设计模式”或按下 Command-Control-R (⌃⌘R) 来进入当前聚焦的标签页或窗口的响应式设计模式。

新设计

凭借 Safari 17 中精简的设计，响应式设计模式让测试您的设计变得更快、更简单。

调整大小

值得注意的是，设备和窗口图标行已取消，这有助于您专注于创建能够流畅适应任何屏幕尺寸的自适应设计，因为网页正在摆脱僵化、特定于分辨率的设计。

调整大小就像点击视口预览任何一侧的“手柄”并将其拖动到任何大小一样简单。您可以在左上角以屏幕点单位显示的大小显示中观察视口尺寸的变化。

您甚至可以测试超出当前使用显示器尺寸的视口大小。继续拖动手柄，预览会流畅地缩放，显示缩放级别为视口实际大小的百分比。在 100% 时，网页内容的每个像素都在预览中可见。当视口增长到大于 Safari 窗口大小时，缩放级别会降低，表明预览已缩小以适应窗口中的可用空间。

像素密度

如今设计师需要考虑的另一个屏幕尺寸维度是屏幕的像素密度。现代设备上的像素变得更小，这会影响您设计中基于像素的资产，如界面图标、照片或视频。视口有效尺寸旁边的菜单允许您更改预览中使用的像素比。1x、2x 和 3x 设置可帮助您测试所有您额外付出努力准备的资产，以便无论用户设备功能如何，都能为他们提供最佳体验。

许多人选择配置其构建工具来自动调整图像元素上 srcset 属性或 CSS 中 image-set() 函数的资产大小，以设置 background-image 的像素比，而不是手动生成每个资产。

<img src="image_1x.jpg" srcset="image_2x.jpg 2x, image_3x.jpg 3x">

<style>
body {
    background-image: image-set("background_1x.jpg" 1x, "background_2x.jpg" 2x);
}
</style>

在这里，像素比控制可帮助您确保工具配置正确，以生成所有必需的资产。

在 CSS 中，您可以使用媒体查询根据显示器的像素比应用样式。例如，您可以在 2x 显示器上设置更细的线条。

@media (min-resolution: 2dppx) {
  .dividerLine {
    border: 0.5px solid grey;
  }
}

像素比控制也允许您测试这些样式。

模拟器

响应式设计模式能很好地近似地显示您的网页布局将如何受视口大小的影响。但 iOS、iPadOS、watchOS 和 visionOS 具有针对其外形尺寸优化的不同渲染行为，这些行为必然与 macOS 不同。

快速、实时反馈是响应式设计模式如此有用的原因，但它以牺牲准确性为代价。这是技术中一个常见的问题。例如，Xcode 为 SwiftUI 开发者提供了一个预览模式，允许他们查看代码生成的界面，甚至允许他们在有限的范围内与界面进行交互。但完整的体验需要构建项目才能在模拟器或实际设备上看到运行结果。

因此，现在可以轻松地跳转到设备模拟器中，以与实际设备相同的全保真体验测试您的站点设计。

响应式设计模式提供了一个新的“使用模拟器打开”菜单，用于快速跳转到当前网页的 Xcode 设备模拟器。它显示了一个建议的模拟器列表，但可用的模拟器远不止列出的这些。您需要从 App Store 免费下载并安装 Xcode 才能运行模拟器。从“使用模拟器打开”菜单中选择“添加模拟器…”选项将在 Safari 中打开一个新标签页，其中包含添加更多模拟器的说明。

为了更准确地了解您的网页在这些环境中的行为方式，您可以使用模拟器，而无需访问设备本身。

Web Inspector

当与 Web Inspector 结合使用时，响应式设计模式会成为一个更强大的工具。它允许您在调整页面大小或调整像素比时查找布局问题的来源。启用开发者功能后，从“开发”菜单中选择“显示 Web Inspector”或按下 Command-Option-I (⌥⌘I)。

在调试窄视口尺寸时，您可能会发现点击 Web Inspector 中的“停靠到左侧”或“停靠到右侧”按钮很有帮助，以便将其与预览视口并排放置。

反馈

更新后的响应式设计模式将工具提炼为核心要素，以便快速评估您的网页在任何屏幕尺寸下的布局。它让您一眼就能发现布局问题，并加速在各种设备准确的模拟器中测试您的页面。

我们很高兴收到您的来信。发送推文给 @webkit，分享您对响应式设计模式的看法。您可以在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。如果您遇到任何问题，欢迎您就 Safari UI（如响应式设计模式）提供反馈，或就网页技术或 Web Inspector 提交WebKit 错误报告。报告问题会带来巨大的改变。

下载最新的Safari 技术预览版，以保持在网页平台的最前沿并使用最新的 Web Inspector 功能。