要在火狐中精准调试手机版css，必须启用响应式设计模式（ctrl+shift+m或cmd+opt+m），选择真实机型以同步视口、dpr和ua，确认“touch”图标亮起，并在inspector中实时编辑、验证及手动保存样式。
要在火狐浏览器中精准调试手机版页面的CSS样式，必须进入真实移动端渲染环境——仅靠缩放窗口或修改CSS媒体查询数值无法触发视口重排、设备像素比计算和触摸事件相关样式，会导致伪类（如:hover）残留、rem单位错乱、@media查询不生效等问题。
启用响应式设计模式
按下 Ctrl + Shift + M（Windows/Linux）或 Cmd + Opt + M（macOS），直接激活响应式设计模式。这一步不能用鼠标点菜单替代，因为某些版本的菜单路径会因语言包缺失而不可见。
若快捷键无效，可点击右上角 ≡ → “更多工具” → “Web 开发者” → “响应式设计模式”。注意：必须在已打开目标网页后操作，否则工具栏不会加载设备信息。
选择预设设备并确认渲染上下文
左上角设备下拉框中选择 iPhone 14 或 Pixel 5 等真实机型。选中后，火狐会同步设置三要素：【视口宽度+设备像素比（DPR）+匹配的User-Agent字符串】，缺一不可——只调尺寸不改DPR会导致1px边框变粗，不换UA则JavaScript中检测mobile的逻辑可能跳过关键样式块。
观察页面右上角是否出现“Touch”图标亮起，未亮起说明触摸事件未模拟，部分依赖touchstart的交互样式（如tap-highlight-color）将无法触发。
打开开发者工具并定位样式
保持响应式设计模式开启状态，按 F12 打开完整开发者工具面板。
切换到“检查器”（Inspector）标签页，用鼠标悬停或点击页面元素，右侧实时显示该元素的盒模型与所有匹配的CSS规则。
在右侧样式面板中，找到被划掉的属性——它们被更高优先级规则覆盖；点击属性名左侧的复选框可临时禁用某条样式，快速验证视觉效果变化。
实时编辑与保存调试结果
在“检查器”的样式面板中，双击任意CSS值（如 color: #333）即可编辑，回车确认。修改立即生效，无需刷新。
若需持久化修改：右键某条CSS规则 → “复制为CSS” → 粘贴到本地样式文件对应位置；【不要直接在开发者工具里点“保存”按钮——它仅保存到内存，关闭标签页即丢失】。
调整过程中，可随时拖动响应式工具栏底部滑块改变宽度，观察不同断点下样式响应行为，重点检查 min-width/max-width 媒体查询是否准确触发。
