01 · NOTES / WebGIS 开发

第 08 节 · 响应式与媒体查询

2026 年 9 月 1 日

第 08 节 · 响应式与媒体查询

📌 版本信息：基于 CSS Media Queries Level 4 与移动端 viewport 现行标准（2026-08-29 核对） 📚 来源：MDN 响应式设计｜ MDN viewport meta

一、这一节的目标

理解"一套代码适配所有屏幕"的响应式思想
掌握 viewport meta 标签的作用（少了它手机上全乱）
掌握媒体查询语法与常用断点
会用相对单位（rem / vw / %）代替死像素
完成"三端自适应页"——作品集在面试官手机上打开也不能垮

二、viewport meta：响应式的前置条件

回看每个页面的 <head>，这行永远在：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

没有它会怎样：手机浏览器默认把页面当 980px 宽的桌面页渲染，再整体缩小塞进屏幕——你的布局"看起来能看"，媒体查询却全部失灵（因为视口根本不是设备宽度）。这一行是移动端的"入场券"。

width=device-width：视口宽度 = 设备宽度；initial-scale=1.0：初始不缩放。

三、媒体查询：给不同屏幕发不同的 CSS

/* 基础样式：先写"手机优先"的默认样式（小屏样式） */
.cards { display: flex; flex-direction: column; gap: 12px; }
.sidebar { display: none; }  /* 手机上隐藏侧栏 */

/* 平板：≥768px 时生效 */
@media (min-width: 768px) {
  .cards { flex-direction: row; flex-wrap: wrap; }
}

/* 桌面：≥1024px 时生效 */
@media (min-width: 1024px) {
  .sidebar { display: block; }   /* 大屏才显示侧栏 */
}

/* 组合条件：≥1024px 且横屏 */
@media (min-width: 1024px) and (orientation: landscape) { /* … */ }

两种写法哲学：

思路	写法	拥护者
移动优先（推荐）	默认 = 手机样式，`min-width` 逐级增强	现代主流，样式覆盖少
桌面优先	默认 = 桌面样式，`max-width` 逐级裁剪	老项目常见

常用断点（约定俗成，不必死记）：

640px 大屏手机
768px 平板竖屏
1024px 平板横屏 / 小笔电
1280px+ 桌面

💡 断点不是"设备型号"，是"你的布局在哪个宽度开始撑不住"。设计时缩放浏览器窗口，看到哪里挤了，就在那里加断点——这比背设备表靠谱。

四、相对单位：别把宽度写死成像素

单位	含义	典型用途
`%`	相对父元素	宽度自适应：`width: 50%`
`vw` / `vh`	视口宽/高的 1%	全屏地图 `height: 100vh`
`rem`	相对根元素字号（默认 16px）	间距、字号（可整体缩放）
`em`	相对自身字号	行内小调整

/* 死像素：窗口变窄就爆 */
.sidebar { width: 300px; }

/* 响应式写法：比例思维 */
.sidebar { width: 30%; max-width: 320px; min-width: 220px; }
.map { height: calc(100vh - 56px); }  /* 视口高减顶栏 */
h1 { font-size: clamp(20px, 4vw, 32px); } /* 字号随窗口在 20~32px 间浮动，clamp 三参数：最小/理想/最大 */

clamp() 是响应式字号神器：clamp(最小, 理想, 最大)，一行顶过去三条媒体查询。

五、响应式三件套总结

viewport meta（HTML 层）——入场券
弹性布局（CSS 层）：Flex + 百分比/clamp，让布局天然能伸缩
媒体查询（断点层）：布局撑不住的地方补几条规则

配合口诀：能用比例就不用像素，能不写断点就不写断点。媒体查询是"补丁"不是"主体"。

六、移动端地图的特殊考虑（预习）

第 17 模块（位置服务）会展开，先混个脸熟：

手机上地图手势：单指拖动、双指缩放——Leaflet/OL 默认支持，但要禁掉页面的橡皮筋滚动干扰（touch-action 配置）
底部安全区：iPhone 底部小黑条会挡住贴底的按钮，需要 env(safe-area-inset-bottom)
触摸目标至少 44×44px，别做针尖按钮

七、动手跟练：08 · 三端自适应页

配套文件：02-web-basics/examples/08-三端自适应页.html

步骤：

Live Server 打开，F12 → 点设备模拟按钮（Ctrl+Shift+M），切换 iPhone / iPad / 桌面三种视口
完成 6 个 TODO：导航在小屏折叠成两行、卡片墙 1→2→3 列渐变、侧栏仅桌面显示、字号 clamp、表格横滚、安全区 padding
不用设备模拟，直接拖拽浏览器窗口宽度，观察断点切换瞬间

通关标准：

手机宽（375px）：卡片单列、无侧栏、无横向滚动条
平板（768px）：卡片两列
桌面（1280px）：卡片三列 + 侧栏出现
能说出"为什么不从桌面版开始写样式"

八、自测题

少写 viewport meta，媒体查询在手机上为什么不生效？
min-width: 768px 的媒体查询是"移动优先"还是"桌面优先"？
clamp(20px, 4vw, 32px) 在 500px 宽的屏幕上，字号实际是多少？
断点应该照抄设备型号表吗？应该怎么定？
height: 100vh 用于全屏地图有什么已知陷阱（提示：手机浏览器的地址栏）？

参考答案

视口仍是默认 980px，媒体查询按 980px 匹配，与设备真实宽度脱节。
移动优先（从小屏往大增强）。
4vw = 20px，处于 20~32 区间 → 实际 20px。
不照抄。把窗口拖到布局开始"破"的宽度，那里才是你的断点。
手机地址栏收起/展开会改变视口高度，100vh 会随之跳动；现代方案用 100dvh（dynamic viewport height）更稳，第 17 模块细讲。

九、下一步

HTML/CSS 阶段一（第 01~08 节）全部完成 🎉 做综合项目 C-02a 个人主页（纯 HTML/CSS 响应式三页站），然后进入 第 09 节：JS 变量与数据类型——编程的大门口。

TAGSweb