响应式布局的核心在于语义化HTML结构与合理断点设计：需用<header><main>等语义标签替代无意义div，表单须包裹在<form>内，搜索栏独立为<section>；viewport meta必须正确设置；断点应按内容临界点而非设备参数设定，优先使用min-width单向递增；Flexbox基础样式应在默认CSS中定义，图片须设max-width:100%。
响应式布局不是“加了媒体查询就自动适配”，核心在于 HTML 结构是否为弹性而生——语义清晰、层级合理、无硬编码尺寸，否则再细的断点也救不回错位的表单或溢出的搜索栏。
HTML结构必须用语义化容器包裹内容
很多页面在小屏上文字挤成一团、按钮错位，根本原因不是 CSS 写得少，而是 <div> 套 <div> 导致 Flex/Grid 失效。浏览器无法理解“这个 div 是导航栏”“那个 div 是主内容区”，自然没法在断点里精准控制。
- 用
<header>、<main>、<aside>、<footer>替代无意义的<div class="wrap"> - 表单字段必须用
<form>+<div class="form-group">包裹每组<label>+<input>，否则媒体查询中无法统一设flex-direction: column - 搜索栏这类交互组件，要单独抽成
<section class="search-bar">，避免和导航、侧边栏共用同一层容器
@media 规则必须配合 viewport meta 才生效
没写或写错 <meta name="viewport">，媒体查询等于摆设。iOS Safari 默认视口是 980px，哪怕你写了 @media (max-width: 480px)，它根本不会触发。
- 必须且只能写：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁用
maximum-scale=1.0：它会让用户双击放大失效，违反可访问性要求 - 禁止写
width=1200或user-scalable=no：前者让视口固定死，后者直接锁死缩放 - 验证方法：在 Chrome DevTools 切换 iPhone 模拟器后，打开 Elements 面板看
<html>元素的clientWidth是否接近设备逻辑像素（如 iPhone 13 是 390）
断点设置别抄设备参数，按内容撑开临界点定
硬套 @media (max-width: 768px) 做平板断点，结果在某些安卓平板上文字换行错乱——因为设计稿里两列卡片刚好在 783px 宽度开始重叠，但你卡在 768 就晚了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，拖动窗口宽度，观察哪一列开始换行、哪张图被裁切、哪段标题文字被迫折成三行——那个宽度就是你的第一个断点
- 推荐用
min-width单向递增，例如：@media (min-width: 769px)、@media (min-width: 992px)，避免max-width和min-width交叉导致覆盖冲突 - 3–4 个断点足够：480px（小屏极限）、768px（窄屏内容开始舒展）、1024px（主流桌面最小宽度）、1200px（宽屏内容居中留白）
- 断点值不要带单位别名（如
sm、md），直接写像素值，CSS 预处理器里用变量也得是$breakpoint-md: 768px这种明确数值
Flexbox 布局必须在基础样式里定义，不能全丢给媒体查询
有人把所有 display: flex、flex-wrap 全塞进 @media 里，结果默认状态下元素堆成一列还占满整行，移动端反而更难操作。
- 基础样式（无媒体查询）就该设
.container { display: flex; flex-direction: column; }，让小屏天然垂直排列 - 大屏增强用
@media (min-width: 769px) { .container { flex-direction: row; } }，而不是反过来 -
flex-basis、flex-grow等属性优先用无单位数值（如flex: 1），避免在不同断点里反复重写宽度百分比 - 图片必须加
max-width: 100%; height: auto;，否则 Flex 容器再灵活，图片也会撑破父级
真正卡住响应式的，往往不是某个 @media 没写对，而是 HTML 里一个没闭合的 <div> 让整个 Flex 树结构失效，或者 viewport meta 少了个引号导致整页缩放异常——这些细节不查 DOM 树、不看 Network 面板里的资源加载顺序，光调 CSS 是永远调不出来的。
