一个页面在电脑上看着整齐，到了手机却出现横向滚动，往往不是“手机太小”，而是布局没有给内容留下伸缩空间。本篇从一个完整的小页面开始，把语义化 HTML、可伸缩宽度和断点连接起来。做完后，你会得到一张手机单栏、宽屏双栏的学习主页。
准备：只需要一个文件
新建一个空文件夹，把下面的代码保存为 index.html，然后用浏览器打开。这里把样式写在文件中，是为了便于第一次练习；项目变大后可以拆成独立的 CSS 文件。示例不需要安装框架，也不需要网络图片。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的学习主页</title>
<style>
/* 宽度包含内边距，避免元素无意中撑破容器。 */
* { box-sizing: border-box; }
body {
margin: 0; color: #252820; background: #f6f5f1;
font: 1rem/1.8 system-ui, sans-serif;
}
.wrap { width: min(100% - 2rem, 64rem); margin-inline: auto; }
header, footer { padding-block: 1.5rem; }
main { display: grid; gap: 2rem; padding-block: 3rem; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }
h1, h2 { margin-top: 0; }
.intro, aside { min-width: 0; overflow-wrap: anywhere; }
aside { border-top: 2px solid #bc4c29; padding-top: 1rem; }
a { color: #9a3f22; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid #9a3f22; outline-offset: 4px; }
/* 先完成窄屏，再在内容放得下时增加一列。 */
@media (min-width: 48rem) {
main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
</style>
</head>
<body>
<header class="wrap">小林的学习记录</header>
<main class="wrap">
<section class="intro" aria-labelledby="intro-title">
<h1 id="intro-title">把今天学到的，变成明天能用的。</h1>
<p>每周完成一个小练习，记录问题、过程和可以复用的方法。</p>
<a href="#next">查看本周计划</a>
</section>
<aside id="next" aria-labelledby="next-title">
<h2 id="next-title">本周计划</h2>
<ul>
<li>完成一个响应式页面</li>
<li>检查键盘是否能操作链接</li>
<li>写下三个遇到的问题</li>
</ul>
</aside>
</main>
<footer class="wrap">保持好奇，持续实践。</footer>
</body>
</html>读懂三个布局决定
width: min(100% - 2rem, 64rem) 给窄屏两侧留下空间，同时限制宽屏上的行长。不要给正文容器直接写死 1024px；屏幕宽度小于这个数值时，内容就容易溢出。这里的最大宽度只是本示例的选择，应根据实际内容调整。
默认布局只有一列，达到 48rem 后才分成两列。断点应取决于内容何时开始拥挤，而不是照着某个手机型号填写。双栏中的 minmax(0, 1fr) 与子元素的 min-width: 0，给长内容留下收缩余地；长链接还需要用 overflow-wrap 处理换行。
clamp() 让标题在一个范围内随视口变化，避免小屏标题过大，也避免大屏字体无限变大。布局、字号和行长一起调整，比只把所有文字缩小更容易阅读。
验收：别只在自己的窗口里看一遍
- 把浏览器逐渐缩窄到约 360px，再拉宽到 1280px；应看到单栏切换为双栏，页面本身不出现横向滚动。
- 按 Tab 移动到“查看本周计划”，应出现清楚的焦点边框；按回车应能跳转。
- 把标题改成更长的句子，并在正文中加入一条长链接，检查它们是否仍能换行。
- 将浏览器缩放到 200%，确认主要信息和链接仍然可以阅读、操作。
常见问题与下一步
如果手机仍显示成缩小的桌面页，先确认没有漏掉 viewport 声明。如果出现横向滚动，优先寻找固定宽度、过大的内边距和不可换行内容；不要用隐藏横向溢出来掩盖问题。如果以后加图片，可从 max-width: 100%; height: auto 开始，同时填写有意义的替代文字。
下一步练习：增加一个“最近完成”的区域，放入三条真实学习记录，再在窄屏与宽屏各检查一次。先保证内容清楚、链接可用，再考虑动画。
继续查阅
布局原则可参考 MDN：响应式设计。本文的页面和检查步骤是可自行修改的教学示例。