Chrome和Firefox响应式差异主因是解析逻辑不一致，非支持与否；应弃用已废弃的max-device-width，统一用max-width；确保viewport标签唯一且置顶；clamp()中避免vh混用；容器查询需父容器显式声明container-type。
Chrome 和 Firefox 在响应式设计上的差异，基本不来自“要不要支持”，而是来自「解析逻辑是否一致」——绝大多数现代 CSS（Flexbox、Grid、媒体查询、clamp()）两者都支持，但细微行为可能不同。关键不是加前缀，而是避开那些被一个浏览器忽略、另一个误读的写法。
media 查询里的 max-device-width 是个无效字段
Chrome 87+ 和 Firefox 80+ 已完全忽略 max-device-width，但它仍常见于老旧模板或复制粘贴的代码里。你写 @media (max-device-width: 768px)，Firefox 直接跳过，Chrome 可能偶然匹配（取决于 UA 模拟状态），造成“同一段 CSS 有时生效有时不生效”的错觉。
- 一律改用
max-width：它基于当前视口宽度，可缩放、可分屏、DevTools 调整后实时重算 - 别混用：
@media (max-width: 768px) and (max-device-width: 768px)这种写法毫无意义，后者纯属冗余 - 如果依赖设备像素比做适配，优先用
@supports检测真实能力（比如@supports (color: color(display-p3))），而不是靠-webkit-min-device-pixel-ratio这类不可靠特征
viewport 单位在 Safari 失效？先查 Chrome/Firefox 是否也异常
很多人以为 vh 问题只出在 Safari，其实 Chrome 和 Firefox 在某些场景下也会表现不一致：比如页面没设 <meta name="viewport">，或 JS 动态覆盖了它，Chrome 可能降级渲染但不报错，Firefox 则更严格——直接按桌面视口计算 100vh，导致内容截断或留白。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">在<head>最顶部，且只出现一次 - 不要用 JS 向
<head>插入 viewport meta——Firefox 会忽略已解析后的新增标签 - 若需动态适配（如 iOS “请求桌面网站”模式下
window.innerHeight !== 100vh），用 JS fallback：height: calc(100vh - 60px)比纯100vh更稳
clamp() 中混用 vh 在旧版 Safari 失效，Chrome/Firefox 却正常
font-size: clamp(1rem, 2.5vw, 1.5rem) 这类写法在 Chrome/Firefox 里跑得飞快，但在 Safari 15.4 之前会被整个声明丢弃——不是部分失效，是整条规则不解析。这不是 bug，是 WebKit 实现滞后。
立即学习“前端免费学习笔记（深入）”；
- 检查目标用户 Safari 版本分布；若需兼容 Safari ≤15.3，避免在
clamp()参数中使用vh或混合单位（如2vh + 1em） - 可用媒体查询降级：
@media (max-width: 768px) { font-size: 1.2rem; }配合基础font-size，比强撑clamp()更可靠 -
clamp(1rem, 2.5vw, 1.5rem)中的vw是安全的，Safari 12+ 全支持；真正风险点是vh和函数嵌套
容器查询（@container）在 Chrome/Firefox 行为一致，但父容器漏声明就全失效
Chrome 105+ 和 Firefox 117+ 对 @container 的解析逻辑高度一致，问题往往出在 DOM 结构上：父容器没设 container-type，或者设在了 flex item 上但宽度被压缩为 0。
- 必须在**直接父容器**上写
container-type: inline-size，不能靠继承，也不能设在body或 layout wrapper 上 - 如果父容器是
display: flex的子项，确认它有明确宽度（比如flex: 1或width: 100%），否则inline-size查询结果恒为 0 - 旧版媒体查询和容器查询混用时，不会冲突，但别让两者同时控制同一属性（如都改
font-size）——视觉上容易打架，调试时难定位来源
真正麻烦的从来不是“哪个浏览器不支持”，而是「同一个规则，在两个浏览器里被不同条件触发或截断」。比如 viewport meta 缺失、父容器尺寸坍塌、clamp() 中的单位组合，这些地方一出错，Chrome 看着正常，Firefox 就偏移几像素，最后排查起来全是时间黑洞。
