必须添加viewport元标签：，否则响应式失效；CSS流式布局依赖max-width、相对单位和弹性图片；媒体查询应内容驱动而非设备硬编码；语义化HTML（如header、nav）降低重构成本。
必须加的 viewport 元标签
不加这行，所有响应式行为都失效——浏览器默认以桌面宽度渲染，缩放后内容糊成一团。正确写法只有一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误包括：user-scalable=no（禁用缩放，违反无障碍要求）、maximum-scale=1.0（导致 iOS 双击放大失效）、漏掉 initial-scale=1.0（部分 Android 会默认缩放）。
CSS 中流式布局的三个硬性依赖
响应式不是靠媒体查询堆出来的，底层靠三样东西撑住结构：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
max-width替代width: 100%：防止大屏下容器无限撑宽，典型写法是max-width: 1200px; margin: 0 auto; - 相对单位优先：用
rem控制字体和间距，用%或vw控制容器宽度，避免死写px - 弹性图片必须加
img { max-width: 100%; height: auto; }：否则图片在小屏上直接溢出容器，且不会等比缩放
媒体查询断点不能按设备尺寸硬编码
写 @media (max-width: 768px) 看似稳妥，实际埋雷。真正该看的是内容何时“挤不下了”：
立即学习“前端免费学习笔记（深入）”；
- 导航栏文字换行、图标重叠时，才是加断点的信号，不是“iPad 就该切 768”
- 推荐用“内容驱动断点”，比如主内容区
max-width: 60ch（约 60 个字符宽度）时触发窄屏布局 - 避免多层嵌套媒体查询，同一选择器内多个断点容易互相覆盖，优先用移动优先写法：
font-size: 1rem;→@media (min-width: 768px) { font-size: 1.125rem; }
语义化 HTML 结构影响响应式重构成本
后期想加汉堡菜单、折叠侧边栏？如果一开始用 <div class="header"> 套着写，改起来要动结构+样式+JS 三处。换成语义化标签，后续适配成本直降：
<ul>
<li>用 <code><header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 明确区域职责
<nav></nav> 内部必须是 <ul><li><a></a></li></ul> 结构，否则屏幕阅读器无法识别导航流<section></section> 当样式容器滥用——它代表有标题的独立内容块，不是 div 的高级替代品最常被忽略的一点：语义标签本身不带样式，但决定了 CSS 选择器的稳定性和可维护性。一个 nav ul 选择器比 .nav-menu .list 更难被误删或覆盖。
