你的主页在电脑上很漂亮，但用手机打开会是什么样？先看两组数据：
| 💻 电脑 | 📱 手机 | |
|---|---|---|
| 屏幕宽度 | 大约 1920px | 大约 390px（窄了 5 倍） |
| 操作方式 | 鼠标，点得准 | 手指，按钮太小吃不到 |
| 屏幕方向 | 横着 | 竖着 |
宽度差了 5 倍，如果页面写死宽度，手机上就会出现：文字挤成蚂蚁、横向滚动条、点不动的按钮。
@media，就是教它"看场景变形"的规则。
变形之前，得先让手机"说实话"。检查你的主页 <head> 里有没有这一行：
拆开看：width=device-width = "页面宽度 = 设备真实宽度"。
🎭 比喻：没有这行，手机浏览器会假装自己是个 980px 宽的电脑屏幕，把你的页面缩成微缩景观——字小到要用放大镜。
加上这行，手机才用自己真实的 390px 来渲染页面。
my-homepage.html 第 5 行已经有这行了（当时照着模板写的），通行证已到手。今天不用改它，知道它干嘛的就行。
你还记得第三课学的 if 吗？JS 里靠它做判断，CSS 里也有自己的"if"——就是 @media。对比一下：
| JS（第三课） | CSS（今天） | |
|---|---|---|
| 写法 | if (天黑了) { 开灯 } | @media (屏幕窄) { 变竖排 } |
| 判断什么 | 变量、事件 | 屏幕宽度 |
| 成立后干嘛 | 执行 {} 里的代码 | 应用 {} 里的样式 |
CSS 会实时检查：窗口一变窄，条件成立，新样式立刻生效；变宽了，条件不成立，样式自动作废。全程不用刷新，这就是"响应式"的由来。
新代码先标序号，对照着看：
| 序号 | 部分 | 意思 |
|---|---|---|
| ① | @media | 宣告："下面是条件样式，别无条件执行" |
| ② | (max-width: 600px) | 条件：屏幕宽度 ≤ 600px（max 最多，见下节） |
| ③ | { ... } | 条件成立时，这里面的样式才生效 |
整句翻译：当屏幕宽度不超过 600px 时，把 .robot 变成竖排。
是不是和 if (屏幕窄) { 变竖排 } 一模一样？😄
| 写法 | 生效条件 | 人话 | 适合场景 |
|---|---|---|---|
@media (max-width: 600px) | 宽度 ≤ 600 | "最多 600 时" | 手机优先：给窄屏写特殊样式 |
@media (min-width: 900px) | 宽度 ≥ 900 | "至少 900 时" | 桌面优先：给大屏加料 |
🎭 记忆口诀：
max-width = 屋顶——从上往下压，窄屏才生效；
min-width = 地板——从下往上顶，宽屏才生效。
判断条件的临界值叫断点（breakpoint）——"变形金刚变形的那个点"。常用参考：
| 断点 | 对应设备 |
|---|---|
| 600px | 手机 📱 |
| 900px | 平板 📟 |
| 1200px | 大屏电脑 🖥️ |
and 连接，比如 (max-width: 900px) and (min-width: 601px) = "宽度在 601~900 之间"（平板专属区间）。本课件下面的变形金刚就用到了这招。
下面三个盒子就是我们的变形金刚，它的变形规则已经写在本课件里了。
👉 抓住浏览器右边缘，左右拖动改变窗口宽度，盯着它看：
当前窗口宽度：?px 🖥️ 桌面形态：横排·蓝 📟 平板形态：横排·橙 📱 手机形态：竖排·红
🔍 变形规则（就三条，都写在 <style> 里）：≤900 变橙色 → ≤600 变竖排+红色
三条规则原文，注意书写顺序：先 900 后 600——窄屏时两条都命中，后写的 600 覆盖 900（CSS 的覆盖规则，老朋友了）：
光会变形还不够，这三招能让你少写一半的 @media：
| 招式 | 代码 | 比喻 |
|---|---|---|
| ① 图片别撑爆 | img { max-width: 100%; } |
图片像水，倒进多宽的杯子就变成多宽，绝不溢出来 |
| ② 卡片会换行 | flex-wrap: wrap; |
第五课老朋友！塞不下就自动去下一行（你的主页卡片已经在用了） |
| ③ 宽度别写死 | 用 % / max-width 代替固定 px |
写死 800px 的手机就是灾难；写 100% 的手机天然适配 |
.card-row 早就用了第②招——手机上看技能卡已经是自动换行的。响应式不是推倒重来，而是补上最后一块短板。
打开 my-homepage.html，在 <style> 的最后面（</style> 之前）加一段 @media。
保存 → 按 F12 打开手机模拟器（或直接拖窄窗口）→ 检查：
✅ 导航栏变竖排居中，logo 在上、链接在下
✅ 作品卡片一行一张，手指点起来舒服
✅ 切回宽窗口，一切恢复原样（变形金刚变回来了）
my-homepage.html，用 F12 手机模拟器验证三种形态都不乱：电脑 / 平板 / 手机。@media (max-width: 600px) {
.avatar { width: 90px; height: 90px; }
}老规矩：改代码 → 保存 → 手机模拟器验证。变形规则写错时最常见的问题：忘了加分号、花括号没配对——和普通 CSS 一模一样。
| 知识点 | 一句话 |
|---|---|
| 响应式设计 ⭐ | 同一个页面，不同屏幕自动变形 |
| @media 语法 ⭐ | @media (max-width:600px) { } —— CSS 的条件判断，实时生效不用刷新 |
| max 还是 min | max-width ≤600 手机优先；min-width ≥900 桌面优先 |
| viewport | 手机按真实宽度渲染的"通行证"（主页已有了） |
| 三件套 | 图片 max-width:100%、flex-wrap、宽度别写死 px |
| 🌍 | 第九课：把主页发布到网上 | 全世界的人用手机就能打开你的主页——你的第一个真正上线的网站 |
先做挑战，做完喊我检查！🚀