先判断“乱”出在哪一层
调整模板时觉得响应式页面乱，通常不是代码问题，而是页面结构在动手前没有理清。先分清是三种情况中的哪一种：
- 内容层级乱：同一屏里标题、正文、按钮、图片混在一起，不知道谁先谁后。
- 模块顺序乱：桌面端按 A-B-C 排，手机端被折成 C-A-B，阅读顺序断了。
- 断点表现乱：同一模块在宽屏正常，到窄屏就挤压、换行、留白不均。
三种问题的整理方法不同。先打开模板的预览模式，把浏览器窗口从宽到窄慢慢拖动，记录每个模块在哪个宽度开始出问题，再决定先改哪一层。
把断点整理成一张可核对的表
响应式页面靠断点（页面宽度变化到某个值时切换布局）来控制显示。模板自带断点时，不要急着新增，先把现有断点列出来核对。
整理时建议按这个顺序：
- 列出模板当前使用的断点宽度，写成一行，例如 1200、992、768、480。
- 在每个断点下截图或记录：导航、主图、正文、按钮、表格、页脚分别是什么状态。
- 标出“内容被截断”“按钮换行”“图片拉伸”“文字压边”的位置。
- 只对确实出问题的断点做调整，不要为每个模块单独加一套断点。
判断标准很简单：同一类模块（比如所有卡片、所有按钮）在同一断点下应保持一致的对齐和间距。如果只有某一个卡片特殊，优先检查它的内容长度，而不是改断点。
先整理内容层级，再调样式
很多响应式混乱，本质是内容没有主次。整理时按“读者先看什么”排一遍：
- 每个模块只保留一个主标题，副标题和说明文字归到同一组。
- 按钮和链接不要和正文混排，单独成组，方便窄屏时整组换行。
- 图片和说明文字成对出现，避免图片在一屏、说明在下一屏。
- 长表格、宽图、代码块这类内容，提前决定是横向滚动还是简化展示。
整理完层级后，再回到模板里调整模块顺序。桌面端从左到右、从上到下的阅读顺序，在窄屏应尽量保持为从上到下，不要出现视觉顺序和内容顺序相反的情况。
模块顺序和命名一起整理
模板调整最容易失控的地方，是模块被反复拖动、复制、隐藏，最后没人记得哪个在用。建议在调整前先做两件事：
- 给模块起可检索的名字：例如“首页-主图-品牌介绍”“产品页-参数表-移动版”，不要用“模块1”“副本2”。
- 记录模块的去留：保留、合并、隐藏、删除，各自写清楚，避免改到一半又恢复。
如果模板支持隐藏模块，优先用隐藏而不是删除，便于对比调整前后的效果。调整完成后，再统一清理不再使用的模块，减少后台列表的干扰。
调整后按顺序复核
改完不要只看一个页面。按下面顺序复核，能发现大部分响应式问题：
- 从首页开始，依次打开栏目页、内容页、表单页。
- 每个页面分别在宽屏、平板、手机三种宽度下查看。
- 重点检查：导航能否展开、按钮是否可点、图片是否变形、文字是否溢出、表格是否可读。
- 把发现的问题按“断点问题”和“内容问题”分开记录，再分别处理。
复核时不必追求每个宽度都完美，先保证主要阅读路径不断、主要操作入口可见。其余细节可以按优先级分批调整。
日常维护时保持整理习惯
响应式页面整理不是一次性的。后续更新内容时，继续保持几个习惯：新增模块先按现有命名规则起名；替换图片时确认在窄屏下的显示效果；发布前用手机实际打开一次页面。这样模板再调整时，页面结构仍然清楚，不需要每次从头梳理。
