旧HTML模板迁移到响应式需重构语义结构、补全关键断点、修复资源路径、重初始化交互组件，并验证可访问性；仅加viewport远不足够。
旧HTML模板迁移到响应式，不是加个viewport就完事——90%的翻车点出在结构松散、断点错位和资源路径断裂上。直接改CSS或塞媒体查询，大概率让PC端正常、手机端空白，或者导航点不动、图片堆成一条线。
检查语义结构是否支撑响应式骨架
很多旧模板用一堆div模拟布局：<div class="header">、<code><div class="left-col">。这类结构无法被媒体查询精准控制，flex/grid 也难以介入。必须先重写为语义化标签：<ul><li><code><div class="header"> → 改为 <code><header></header>（且全页只能有一个）
<div class="nav"> → 改为 <code><nav aria-label="主导航"></nav><div class="main-content"> → 改为 <code><main></main>（禁止多个<main></main>）float: left布局的侧栏/内容区，必须替换成display: flex或display: grid容器重设断点与栅格行为，别信“自动适配”
旧模板常靠width: 100% + max-width假装响应式，但没定义任何断点。实际要手动补全最小可行断点集：
- 至少覆盖三个关键宽度：
@media (max-width: 575.98px)（超小屏）、@media (min-width: 768px)（平板）、@media (min-width: 992px)（桌面） -
col-类若来自 Bootstrap，确认是 v5+：旧版.col-md-6在 v5 中仍可用，但.col（等分）更稳定；.hidden-xs等类已彻底移除，改用.d-none .d-md-block - 图片必须加
srcset和sizes，否则小屏加载桌面图，LCP 直接超标
验证路径与加载上下文是否断裂
本地双击index.html能跑，上传到 Nginx 就报 404，八成是路径问题：
- 所有
src和href改用根相对路径：/css/style.css而非css/style.css或../css/style.css - 检查 Web 服务器 root 是否指向项目根目录（如 Nginx 的
root /var/www/html;），不是/var/www/html/dist这种多一层的路径 - 单页应用（SPA）必须配置 fallback：Nginx 加
try_files $uri $uri/ /index.html;，否则刷新页面 404 - JS 中硬编码的
http://localhost:3000/api全部替换为/api或通过环境变量注入
交互组件必须重初始化，data-* 属性已失效
Bootstrap 5、原生 JS 组件、甚至某些轮播插件，都废弃了data-toggle这类声明式属性。不手动初始化，点击就是静默失败：
- Modal 必须写：
const myModal = new bootstrap.Modal(document.getElementById('myModal')); - Tooltip 默认禁用，需显式启用：
new bootstrap.Tooltip(elem, { trigger: 'hover focus' }); - 表单控件如
<input type="checkbox">，若想用 Bootstrap 5 的.form-check样式，结构必须是<input>和<label></label>同级，不能嵌套 - 所有 JS 初始化代码，确保包裹在
document.addEventListener('DOMContentLoaded', () => { ... })中，避免 DOM 未就绪
最易被忽略的是：迁移后没验证 Tab 键流和屏幕阅读器朗读逻辑。哪怕视觉上完全一样，如果<nav></nav>里没有aria-label，或者<main></main>缺失，对可访问性就是致命缺陷——这不是“锦上添花”，而是上线前必须人工走一遍的流程。
