必须添加viewport标签并仅保留width=device-width和initial-scale=1，使用语义化HTML替代div嵌套，正确配置srcset/sizes，为Flex/Grid添加媒体查询，并清理冗余旧代码。
viewport 标签缺失或参数错，页面直接缩成一团
不加 <meta name="viewport">，iOS 和 Android 浏览器默认按 980px 渲染再缩小，文字小得看不清、按钮点不准——这是所有多端显示故障的起点。
必须写，且只保留最小必要参数：<meta name="viewport" content="width=device-width, initial-scale=1">
-
width=device-width是核心，它让视口宽度匹配设备逻辑像素宽度；缺了它，max-width: 100%、flex全部失效 - 去掉
user-scalable=no：可访问性差，iOS Safari 可能忽略，部分安卓 WebView 会锁死横屏 - 避免
maximum-scale=1.0或minimum-scale=1.0：在某些 WebView 中不生效，反而导致横屏白屏 - 该标签必须放在
<head>最前面，且在任何 CSS 引入之前
语义化结构混乱导致布局错位和辅助技术失效
一堆 <div class="box-wrapper-inner"> 嵌套，不仅让 CSS 维护困难，还会让屏幕阅读器无法识别导航、主内容、侧边栏等区域，间接引发移动端焦点错乱、语音播报顺序异常等问题。
重构不是为了“好看”，是为了让浏览器同时生成正确的渲染树和无障碍树。
立即学习“前端免费学习笔记（深入）”；
- 把
<div class="header">换成<header>，<div class="nav">换成<nav>，<div class="main">换成<main> - 用
<details><summary>替代纯 CSS 隐藏/显示菜单，语义更明确，无需 JS 也能降级工作 - 避免用
display: none隐藏关键导航项再用 JS 切换——屏幕阅读器会直接跳过，造成信息断层 - 为交互元素（如折叠按钮）添加
aria-expanded和aria-controls，否则 VoiceOver/NVDA 无法同步状态
响应式图片 srcset 和 sizes 写错，高清屏加载巨图或模糊发虚
srcset 不是“多个图随便列”，它是一套浏览器严格解析的规则。写错一个字符，整组响应式逻辑就退化为只加载 src 的单图。
-
srcset中每个 URL 后的w描述符（如1200w）必须与 CDN 参数完全一致：写?w=1200 1200w，不能写?w=1200 480w -
sizes是字符串，不是 CSS 表达式：写成sizes="(max-width: 768px) 100vw, 50vw"，不能漏掉最后一段覆盖全范围的值 - 如果实际布局中图片只占容器 1/3 宽，但
sizes写了100vw，浏览器就会选一张三倍大的图下载，浪费带宽还模糊 - iOS Safari 12.1 以下不支持
w描述符，必须配合<picture>+2x回退，否则高 DPR 设备只能加载低清图
Flex/Grid 布局未配媒体查询，小屏堆叠失效或溢出
只写 display: flex 不等于响应式。没配 @media 控制方向和换行，大屏横向排列的卡片，在手机上可能横向滚动或撑破容器。
- 对卡片容器设
flex-wrap: wrap，子项设flex: 0 0 calc(50% - 0.5rem)（配合gap），再用媒体查询在max-width: 767px下改flex-direction: column - CSS Grid 推荐用
repeat(auto-fill, minmax(280px, 1fr))，而不是固定列数；minmax()中的280px要略大于卡片最小内容宽度，防止空列 - 避免在 Flex 子项上滥用
width: 33%：它不随父容器弹性收缩，小屏下容易溢出；优先用flex-basis或 Grid - 注意
gap在老版 Safari 中需加-webkit-前缀，否则空白消失
真实项目里最常被忽略的，不是怎么写新特性，而是删掉旧代码里的冗余类名、硬编码像素值、无效 !important 和已废弃的 float 布局残留——它们会悄悄干扰现代布局的计算逻辑。
