第 4 周总结：Grid 布局与响应式 — 一个页面，适配所有屏幕

蜗牛往上爬 · 前端工业可视化学习笔记第 4 周总结
本周掌握了 CSS 的两大核心能力：Grid 二维网格布局（让页面像 Excel 表格一样排列）和响应式设计（让同一个页面适配手机、平板、PC）。从大屏数据看板到双端适配页面，现在是真正能"搭出完整页面"的阶段。

一、本周学了什么

天数	主题	核心知识点	产出
Day 1-2	Grid 布局	grid-template-columns/rows、fr、repeat()、grid-column/row、grid-template-areas	数据看板网格布局
Day 3-4	响应式基础	@media、断点、移动优先、em/rem/vw/vh、max-width	响应式数据看板
Day 5-6	响应式实战	图片自适应、clamp()、常见断点、综合响应式	PC/手机双端适配页面

知识图谱

Grid 布局（二维）
├── 容器属性
│   ├── grid-template-columns / grid-template-rows
│   ├── fr 单位（比例分配）
│   ├── repeat() 函数（减少重复）
│   ├── gap（间距）
│   └── grid-template-areas（可视化布局）
│
├── 项目属性
│   ├── grid-column（跨列）
│   ├── grid-row（跨行）
│   └── grid-area（命名区域）
│
└── Grid vs Flex 选型
    ├── 一行 → Flex
    └── 多行多列 → Grid

响应式设计
├── 媒体查询
│   ├── @media (max-width: 768px)
│   └── @media (min-width: 1024px)
│
├── 断点
│   ├── 480px（小手机）
│   ├── 768px（手机/小平板）
│   ├── 1024px（平板）
│   └── 1366px（笔记本）
│
├── 流式单位
│   ├── %（父元素）
│   ├── em / rem（字号比例）
│   ├── vw / vh（视口比例）
│   └── clamp()（最小→理想→最大）
│
└── 关键技巧
    ├── max-width: 100%（图片自适应）
    ├── width: 90%; max-width: 1200px（容器防过宽）
    └── viewport meta 标签（移动端必加）

二、三个练习页面回顾

练习 1：数据看板网格布局

用时：Day 1-2，约 2 小时

核心代码：

.dashboard {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 16px;
}
.dashboard-header { grid-column: 1 / -1; }
.panel-chart { grid-row: 2 / 4; }

收获：Grid 让行列控制一步到位。fr 做比例、grid-column: 1 / -1 占满行、grid-row: 2 / 4 跨两行。

练习 2：响应式数据看板

用时：Day 3-4，约 2 小时

核心代码：

@media (max-width: 1024px) {
  .dashboard { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .dashboard { grid-template-columns: 1fr; }
}

收获：媒体查询让同一个 Grid 布局在不同屏幕间切换列数，移动优先让逻辑更清晰。

练习 3：PC/手机双端适配页面

用时：Day 5-6，约 2 小时

核心代码：Grid + 4 段断点 + clamp() + Flex 导航栏 + 图片自适应。

收获：一个完整的响应式页面 = Grid 控制列数 + 媒体查询控制断点 + clamp() 控制字号。用 F12 的响应式模式（Ctrl+Shift+M）测试效果非常直观。

三、Grid vs Flex 核心速记

维度	Flex	Grid
维度	一维（行或列）	二维（行和列）
核心属性	`justify-content` / `align-items`	`grid-template-columns` / `grid-template-rows`
均分	`flex: 1`	`1fr`
固定	`flex: 0 0 240px`	`240px`
换行	`flex-wrap: wrap`	自动（行数由 `grid-template-rows` 决定）
最佳场景	导航栏、卡片列表	数据看板、页面骨架

口诀：一行用 Flex，多行多列用 Grid。不确定时，先问"这个布局更像排队还是更像表格？"

四、响应式核心速记

媒体查询语法

@media (max-width: 768px) { }    /* 手机及以下 */
@media (min-width: 768px) { }    /* 平板及以上 */

移动优先模式

/* 默认 = 手机 */
.grid { grid-template-columns: 1fr; }

/* 逐步增强 */
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }

流式单位速记

单位	相对谁	场景
`%`	父元素	宽度
`rem`	根元素字号	字体、间距
`vw`	视口宽度	大标题
`clamp()`	三值限制	字体自适应

响应式检查清单

□ viewport meta 标签已加
□ 宽度用 % + max-width，不用固定 px
□ 字号用 clamp() 或 rem
□ 图片用 max-width: 100%
□ 媒体查询按统一顺序排列

五、本周踩过的坑

坑	原因	解决
grid-template-areas 不生效	每行列数不一致	确保每行"列数相同"
手机端布局没变化	忘了加 viewport meta	必须加 `<meta name="viewport" ...>`
媒体查询覆盖混乱	max-width 从大到小顺序写反	统一从大到小或从小到大
容器在手机上溢出	用了固定 px 宽度	改用 `%` + `max-width`
Grid 子元素高度不对	没设 `height: 100%`	给子元素加高度或对齐属性

六、自测清单

全部打勾再进入下一周。

[ ] 能写出 Grid 容器属性（grid-template-columns/rows、gap）
[ ] 能使用 fr 单位和 repeat() 函数
[ ] 能使用 grid-column / grid-row 控制项目位置
[ ] 能使用 grid-template-areas 可视化布局
[ ] 能说出 Grid 和 Flex 的选型分工
[ ] 能写出 @media 媒体查询基本语法
[ ] 能说出 4 个常用断点（480/768/1024/1366）
[ ] 能解释移动优先（Mobile First）
[ ] 能使用 %、rem、vw、vh、clamp()
[ ] 能实现图片自适应（max-width: 100%）
[ ] 3 个练习页面全部完成并在浏览器验证
[ ] 每日博客文章 1 篇（共 3 篇）+ 本篇周总结 = 4 篇完成

七、下周预告

第 5 周：CSS 进阶与动效

下周围绕 CSS 的"锦上添花"能力——让页面动起来、更好看。

预计学习内容：

定位（position：relative/absolute/fixed/sticky）
显示与隐藏（display、visibility、opacity）
过渡动画（transition）
关键帧动画（@keyframes）
变换（transform：位移/旋转/缩放/倾斜）
伪元素（::before / ::after）

动手练：给大屏面板加悬浮动效、呼吸灯效果、数据跳变动画。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 4 周 · 总结篇

【HTML+CSS】week4-summary