CSS 教程 / 用宽度、缩放与键盘测试检查响应式 CSS

响应式 CSS 应在不同的视口宽度、缩放级别和输入条件下保持可用。检查内容是否被剪裁、页面是否意外滚动、控件是否隐藏以及键盘焦点是否不可见，而不仅仅依赖于单个手机尺寸预览。

准备页面以进行响应式检查

在上一课中学习的流式尺寸、媒体查询和图像比例都汇集在同一页面上。如果你将以下代码保存为 responsive-check.html，以 UTF-8 编码保存并用浏览器打开，就可以在同一页面上看到菜单、卡片、图片、长文本和输入表单。图像包含在文件中，不需要单独的库或服务器。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

这个页面的基线目标是在练习宽度内不产生整页水平溢出；仍应在自己的环境中检查。在后续练习中，我们将通过逐一添加和删除导致错误的 CSS 来找出原因。如果你复制原始文件并保留为 responsive-check-original.html，当你不小心更改了各种属性时，很容易恢复。表单提交是一个示例，它不会发送到存储服务器，而是使用建议的测试地址而非实际个人信息。

连续调整宽度并检查断点边界

在 Edge 中，打开开发者工具，启用设备模拟，然后在响应式模式下输入一个宽度。Windows 默认快捷键为 F12 或 Ctrl+Shift+I 打开开发者工具，Ctrl+Shift+M 启用设备模拟。工具栏标签和位置因版本而异；请参阅 微软 Edge 设备模拟指南。在 CSS 媒体查询和基于内容的断点 中比较每个条件下略低和略高的宽度。

1. 在 320px 和 390px 时，检查菜单是否跨多行，以及图片和输入框是否适合文本内。向页面底部滚动，查看是否有文本截断和横向滚动。
2. 慢慢增加宽度，并检查卡片是否过窄或菜单之间是否有不必要的空隙。不要只抽查几个设备预设就结束；连续调整宽度也可能发现问题。
3. 此示例在 42rem 处切换。以16px的初始字体大小，比较671px、672px和673px：671px 应该只有一列卡片，而672px和673px 应该有两列。
4. 在宽屏（如1365px和1920px）上，检查是否保持最大文本宽度，并且行长度不太长。除了设备模拟，还要检查实际使用设备的操作、虚拟键盘和屏幕旋转情况。

设备仿真是一种近似工具，它会更改宽度和某些条件。它不能复制真实设备的所有字体、触控控制、虚拟键盘和浏览器行为。我们建议您在实际设备上检查虚拟键盘出现在屏幕底部时的输入情况。

分别检查浏览器缩放与文本字号变化

随着浏览器缩放整个页面，CSS 可以使用的视口宽度也可能会发生变化。在 Windows 上使用 Ctrl 和 + 进行放大，并使用 Ctrl+0 恢复默认缩放。设置字体大小或仅放大字体是单独检查文本与框关系的条件。在 CSS 中更改 HTML 的 font-size 的实验不应记录为浏览器缩放。

1. 在实际浏览器窗口的默认缩放下记录屏幕宽度，并将其缩放到 200%。检查菜单文本、卡片描述、标签、输入框和按钮中的文本没有被截断或重叠。
2. 确保您的内容在更高放大倍数下仍然可读。按1280 CSS px的宽度放大400%时，该空间约等于320 CSS px，但实际值可能因浏览器界面、滚动条等而有所不同。
3. 恢复默认缩放，然后通过显著更改浏览器字体设置再次检查。更改默认字体、放大页面和修改CSS的条件和结果将作为单独项目记录。

可访问性检查包括在文本放大至 200% 时保持内容和功能，并在相当于 320 CSS 像素的范围内重新流动普通的垂直滚动内容，而无需双向滚动。像数据表或地图这样的内容可以有依据的二维布局例外，但该例外不会自动适用于整个页面。相关标准和例外详见 W3C：文本大小调整（Resize Text），W3C：重排（Reflow） 。

重现并诊断水平溢出

只需将以下声明添加到原始 CSS 的底部，并在 390px 下打开。第一个卡片至少需要 40rem，因此它无法适配屏幕。使用开发者工具中的元素选择功能选择卡片，并检查计算出的宽度和最小宽度。

.card:first-child { min-width: 40rem; }

通过仅缩小网格列可能无法解决此问题。这是因为项目本身需要一个最小宽度。如果删除你添加的声明，它将恢复到原始 min-width: 0。在相同屏幕宽度下，再次检查水平滚动和卡片显示。

恢复后，这次只需添加以下声明：检查长标识符是否溢出，并删除多余的声明以将其恢复为 anywhere。同时引入两个问题会使人难以确定哪项更改解决了问题。关于固定最小宽度与长字符串换行，参见 CSS 溢出、长文本换行和省略号 。

.card { overflow-wrap: normal; }

您可以在控制台中使用下面的数值快速检查整个页面是否溢出。如果右侧的数字大于左侧，则表示需要查明原因。此检查仅比较文档的宽度，并不能立即告诉您是哪个元素导致的；预期的水平滚动区域和隐藏元素也必须另外确定。

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

查找被固定高度裁剪的内容

在没有任何宽度问题的原始内容上，只需在底部添加以下代码：请注意，第一个卡片底部的描述或链接被截断了。固定高度和隐藏的组合尤其成问题，因为放大的文字或较长的描述会增加所需的高度。

.card:first-child { height: 10rem; overflow: hidden; }

删除你添加的声明，以便根据内容恢复自动高度。即使设计目标是匹配短卡片的高度，也要避免截断信息。可以考虑的替代方案包括设置最小高度以允许空白空间或调整布局条件，并再次检查长句和放大条件。同样的原因，隐藏横向滚动或不断缩小字体以掩盖问题不是首选方案。

检查键盘导航并记录结果

打开新页面后，使用 Tab 键依次移动到菜单、卡片链接、电子邮件输入字段和按钮。使用 Shift+Tab 向后移动，并确保焦点边框可见。确保导航到屏幕外元素时适当滚动，并且没有固定菜单或其他元素完全阻挡焦点。如果使用 CSS 更改了视觉顺序，请确保它不会与 HTML 阅读/键盘顺序冲突。

此表只是记录格式示例，不代表已经在读者的环境中测试通过；请实际检查后填写观察到的结果。即使记录没有问题，也必须留下已经实施的条件，以便与后续更改进行比较。通过分别检查宽度、放大、内容和键盘操作，并在修正后重新测试原始失败条件，可以减少仅查看一个屏幕容易遗漏的问题。