CSS 布局与响应式
制作从 320px 到桌面都不横向溢出的两栏页面，并用长标题和空列表测试。
课程全目录 · 选择章节
本课学习目标
- • 理解 — 布局先处理内容宽度、间距和阅读顺序，再加入视觉效果。Flex 适合一维排列，Grid 适合二维区域。用流式宽度与必要的断点适应屏幕，避免固定高度裁切内容；动效应尊重减少动态效果的偏好。
- • 应用 — 笔记列表在窄屏为单列，宽屏出现阅读侧栏。侧栏应按内容需要出现，而不是为了某个设备型号；正文行宽限制能提高阅读舒适度。
- • 验证 — 制作从 320px 到桌面都不横向溢出的两栏页面，并用长标题和空列表测试。
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
布局先处理内容宽度、间距和阅读顺序，再加入视觉效果。Flex 适合一维排列，Grid 适合二维区域。用流式宽度与必要的断点适应屏幕，避免固定高度裁切内容；动效应尊重减少动态效果的偏好。
笔记列表在窄屏为单列，宽屏出现阅读侧栏。侧栏应按内容需要出现，而不是为了某个设备型号；正文行宽限制能提高阅读舒适度。
不要通过隐藏溢出掩盖布局错误。检查长文本、图片尺寸与 Grid 子项最小宽度，保证内容仍然可读且键盘可操作。
02 / 心智模型
理解
布局先处理内容宽度、间距和阅读顺序，再加入视觉效果。Flex 适合一维排列，Grid 适合二维区域。用流式宽度与必要的断点适应屏幕，避免固定高度裁切内容；动效应尊重减少动态效果的偏好。
应用
笔记列表在窄屏为单列，宽屏出现阅读侧栏。侧栏应按内容需要出现，而不是为了某个设备型号；正文行宽限制能提高阅读舒适度。
验证
制作从 320px 到桌面都不横向溢出的两栏页面，并用长标题和空列表测试。
03 / 代码骨架
.layout { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .layout { grid-template-columns: 16rem minmax(0, 1fr); } }这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
笔记列表在窄屏为单列，宽屏出现阅读侧栏。侧栏应按内容需要出现，而不是为了某个设备型号；正文行宽限制能提高阅读舒适度。
- 01
分析边界
布局先处理内容宽度、间距和阅读顺序，再加入视觉效果。Flex 适合一维排列，Grid 适合二维区域。用流式宽度与必要的断点适应屏幕，避免固定高度裁切内容；动效应尊重减少动态效果的偏好。
- 02
观察具体过程
笔记列表在窄屏为单列，宽屏出现阅读侧栏。侧栏应按内容需要出现，而不是为了某个设备型号；正文行宽限制能提高阅读舒适度。
- 03
验证失败路径
不要通过隐藏溢出掩盖布局错误。检查长文本、图片尺寸与 Grid 子项最小宽度，保证内容仍然可读且键盘可操作。
05 / 动手做
用自己的产物检验理解
制作从 320px 到桌面都不横向溢出的两栏页面，并用长标题和空列表测试。
完成时检查
- 提交可阅读的实现或流程图，并注明输入和输出。
- 至少覆盖一个成功案例与一个失败案例。
- 解释本课的边界，写出仍未解决的一项限制。
自动保存在当前浏览器，不会同步到账户。
06 / 检查点