需先确认模板响应式机制：查开发者工具的display属性（flex/grid）、源码中@media/layui/Bootstrap引用及css/js文件，再针对性修改，避免误触JS逻辑或路径错误。
先确认模板用的是哪套响应式机制
直接改 index.html 之前，得先搞清它靠什么实现响应式——是纯 CSS 媒体查询？还是用了 flex 或 grid？有没有引入 layui、Bootstrap 这类框架？不同机制的修改路径完全不同。比如你看到 @media (max-width: 768px) 大量存在，说明断点靠手写媒体查询；如果页面里满屏 class="layui-col-md6"，那所有栅格行为都得走 layui 的规则改，不能自己加 width: 50% 破坏它。
快速判断方法：
– 打开浏览器开发者工具，选中一个内容区块，看 computed 样式里 display 是 flex 还是 grid；
– 搜索源码里有没有 bootstrap.min.js 或 layui.all.js；
– 查看 css/ 目录下是否有 bootstrap.css 或 layui.css。
改导航栏时别只动 HTML 结构
很多人在 nav 里删掉“新闻动态”菜单项，结果手机端汉堡菜单点开还是空占位。这是因为导航折叠逻辑通常由 JS 控制（比如 layui.nav 初始化或自定义 toggle 脚本），HTML 里删了，JS 还在等那个 ID 或 class。
- 先搜
js/下的文件，找nav、toggle、mobile-menu相关代码，确认是否绑定了事件或依赖 DOM 结构 - 如果用了
layui，删菜单前要同步删掉lay-id对应的初始化配置，否则 JS 报错Cannot read property 'children' of null - 移动端点击区域太小？检查
nav a是否设置了min-height: 44px或padding，iOS Safari 对小于 44px 的可点击区会自动放大，导致误触
图片变形、拉伸、加载慢，三类问题分开修
响应式模板里图片出问题最常见，但原因各不相同：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
变形：多数因为 CSS 里写了
img { width: 100%; height: auto; }，但父容器没设高度，或用了object-fit: cover却没配height。解决：给图片父级加aspect-ratio: 16/9（现代浏览器）或用 padding-bottom 百分比占位 -
拉伸：常出现在轮播图或 banner 区，源图尺寸远大于容器，又没用
srcset。直接改img标签，加上srcset和sizes，例如：
-
加载慢：检查是否所有
img都漏了loading="lazy"，特别是非首屏图片；GIF 动图尽量换成 MP4（用video+poster替代）
本地改完能看，一上线就错位？查静态资源路径和 base 标签
这是交付翻车最高频的环节。你在本地双击 index.html 能正常显示，但扔到服务器后 CSS 不生效、JS 报 404，大概率是路径写死了。
- 打开
index.html，搜索—— 如果有，且值是 href="./"或href="/"，而你的网站部署在子目录（如https://example.com/company-site/），那所有相对路径都会错乱 - 检查所有
和<script src="..."></script>，路径是否以/开头？如果是，它们会从根目录找，而不是当前页面所在目录 - 稳妥做法：统一用相对路径，比如
css/style.css、js/main.js，并确保服务器开启目录索引或配置了正确的base（Nginx 可加location / { try_files $uri $uri/ /index.html; }）
真正容易被忽略的是：有些模板在 js 里还硬编码了图片路径或 API 地址，比如 const logoUrl = '/images/logo.png' —— 这种藏得深，必须全局搜索 .png、.jpg、http 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
