响应式设计成败取决于HTML语义结构与CSS弹性机制的协同：语义化标签确保内容流逻辑清晰，viewport设置准确，Flexbox/Grid配合min-width比媒体查询更可靠，图片需srcset+sizes优化，点击区域不小于44×44px。
移动端响应式不是靠“加一堆媒体查询”堆出来的，而是从 HTML 结构定型那一刻就决定了成败。 语义清晰、顺序合理、不依赖视觉流的 HTML，配合 CSS 中真正可控的弹性机制，才能让页面在小屏上不崩、不挤、不藏关键内容。
HTML 语义标签决定内容流动逻辑
移动端没有“左右并排”的奢侈空间，所有内容最终要垂直堆叠。如果 <div> 嵌套过深或用 <div class="left"> 这类纯视觉命名，CSS 就得靠 hack 强行重排，极易出错。
- 用
<header>、<nav>、<main>、<section>、<footer>明确内容层级，浏览器和屏幕阅读器能自然按 DOM 顺序读取 - 导航放在
<nav>内，而不是塞进<div id="menu">—— 后者在折叠菜单时容易漏掉aria-expanded状态管理 - 重要内容（如主按钮、核心表单）写在 HTML 靠前位置，避免移动端靠后内容被误判为“次要”而隐藏
viewport 元标签必须写对，且仅写一次
很多页面在手机上缩放异常、字体忽大忽小，问题就出在 <meta name="viewport"> 的 content 值被重复或写错。
- 只允许存在一个
<meta name="viewport">，多写会导致浏览器行为不一致 - 必须包含
width=device-width和initial-scale=1.0，缺一不可；user-scalable=no会破坏可访问性，不建议加 - 不要用
maximum-scale=1.0锁死缩放——视障用户需要放大文字，这是 WCAG 基本要求
Flexbox 和 Grid 的 min-width 控制比媒体查询更可靠
当卡片、按钮、表单项在小屏上换行错乱，别急着加 @media (max-width: 768px)，先检查是否用了真正可伸缩的容器约束。
立即学习“前端免费学习笔记（深入）”；
- 卡片列表推荐用
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;—— 它比flex-wrap更稳定，不会因内容高度差异导致行高塌陷 - 单行工具栏用
display: flex; flex-wrap: wrap;时，给子项加flex: 0 0 calc(50% - 0.5rem);比单纯设width: 50%更抗干扰 - 表格在移动端最难搞，
table-layout: fixed;必须配<col width="200">或 CSScol { width: 200px; }，否则列宽由内容撑开，小屏必溢出
图片响应式不能只靠 max-width: 100%
img { max-width: 100%; height: auto; } 只解决“不撑破容器”，但没解决“加载带宽浪费”和“高清屏模糊”问题。
- 必须用
srcset+sizes：比如<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw"> - 背景图用
background-size: cover;时，记得加background-position: center;，否则小图拉伸后关键内容可能被裁掉 - SVG 图标优先用内联方式（
<svg><path></svg>），避免 HTTP 请求，也杜绝了img标签在 iOS 上的渲染抖动
最常被忽略的一点：移动端点击区域必须 ≥44×44px，这不只是设计规范，是 iOS 和 Android 的触摸识别底层要求。用 padding 扩展可点击区比用 font-size 放大文字更稳妥——后者在缩放时可能失效。
