响应式布局失效90%源于html基础错误：viewport标签拼写错误（如intial-scale）、p内嵌div等非法嵌套、img多写导致dom结构被浏览器强制修正，进而使css和js在错误结构上运行。
响应式布局失效，90% 不是 CSS 写错了，而是 HTML 结构或基础配置被浏览器悄悄改写或忽略。最该先查的不是媒体查询，而是 <meta name="viewport"> 是否拼错、<p></p> 里是否塞了 <div>、<code><img> 后面有没有多写 。
viewport 元标签拼写错误或缺失
移动端一打开就缩成一团、文字糊、按钮挤，基本就是它没生效。iOS Safari 对拼写极其敏感，intial-scale（少个 i）或 content=" width=device-width "（前后空格）都会让整条 meta 被忽略。
- 必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要加
user-scalable=no：违反无障碍规范，部分安卓 WebView 会退回到怪异模式 -
shrink-to-fit=no可选但推荐，能阻止 Safari 自动缩放适配内容 - 检查方式：在 DevTools 的 Application → Manifest 标签页里看 viewport 是否被识别；或直接在 Console 执行
document.querySelector('meta[name="viewport"]').content看输出
HTML 嵌套非法导致 DOM 结构崩坏
你写的 <div class="wrapper">
<p>文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<div>块内容</div>
</div>，浏览器实际解析成：<div class="wrapper"><p>文字</p></div>
<div>块内容</div>——因为 <div> 不允许作为 <code><p></p> 的子元素，浏览器强制关闭 <p></p>，后续内容扔到外面。
- 现象：父容器高度为 0、子元素“飘”在外面、CSS 选择器突然不生效
- 验证方法：右键父容器 → “Edit as HTML”，删一个字符再回车；如果子结构整体跳出去，说明原始 HTML 已被修正
- 终极确认：运行
document.body.innerHTML，和你本地源码逐行比对，多出的、消失的<section></section>都是铁证 - 修复入口：用 W3C Validator 直接报错，如
Element div not allowed as child of element p，这类必须优先修
自闭合标签多写闭合符引发嵌套偏移
<img src="x.jpg"> 在 HTML5 中是非法写法。<img> 是 void 元素，不能有结束标签。浏览器会把它当两个标签处理：第一个 <img> 被忽略，第二个 被当作普通容器，后续所有 HTML 结构整体右移一级。
- 后果：样式失效、JS 获取不到元素、表单提交异常、媒体查询断点全乱
- 常见误写：
<input>、<br>、<hr> - 正确写法：只保留开始标签，无闭合，如
<img src="x.jpg">、<input type="text"> - 排查技巧：在 DevTools 的 Elements 面板里看 DOM 树是否出现意料之外的嵌套层级
语义化标签替换后样式丢失
把 <div class="header"> 换成 <code><header></header>，结果样式没了、宽度塌陷、margin 不生效——不是标签不兼容，是你 CSS 还写着 .header，压根没命中新标签。
- 现象：新标签显示为 inline、字体变小、垂直居中失效，本质是“无样式”，回退到了浏览器默认值
- 渐进迁移方案：
header, .header { height: 60px; }，保证旧类和新标签同时生效 - 浮动清除要重写：
div.clearfix规则不会作用于<main></main>，得加main { display: flow-root; }或继续保留class="clearfix" - 别漏掉
box-sizing: border-box：语义化标签默认仍是content-box，不显式设置会导致 padding 和 width 叠加溢出
真正卡住响应式的，往往不是媒体查询怎么写，而是页面连被正确解析这关都没过。DOM 结构一旦被浏览器修正，后面所有 CSS 和 JS 都是在一个“假结构”上运行——越调越乱，越修越偏。
