viewport meta 标签必须放在 <head> 内且含 width=device-width, initial-scale=1，否则响应式失效；HTML5 语义化结构是响应式基础；rem 基准需动态计算；图片须用 srcset+sizes；组件响应式应由 DOM 结构决定。
viewport meta 标签必须放在 里且含 width=device-width
没这行，所有响应式逻辑都失效。手机浏览器默认按 980px 渲染，<meta name="viewport" content="width=device-width, initial-scale=1"> 是唯一能关掉这个“自动缩放”的开关。
常见错误：width=375 这种固定值写法会让 iPad 和折叠屏直接失配；user-scalable=no 会锁死缩放，破坏可访问性；标签错放到 <body> 里则完全不生效。
- 必须写在
<head>内，且在其他 CSS/JS 加载前 -
initial-scale=1不可省略，否则某些安卓 WebView 会默认缩放为 0.8–0.9 - 别加
maximum-scale—— iOS Safari 在部分版本中会因此禁用双击放大
HTML5 语义化结构是响应式组件的容器基础
响应式不是靠一堆 <div> 堆出来的，而是靠 <header>、<nav>、<main>、<section>、<footer> 这类语义标签定义内容层级和流动边界。它们本身不带样式，但为 CSS 的 flex/grid 布局提供天然锚点。
比如一个导航组件，在小屏下需要折叠成汉堡菜单，它的 DOM 结构必须能支持两种状态切换：<nav> 包裹 <ul>，而不是嵌套在无意义的 <div class="nav-wrapper"> 里——后者会让 JS 控制展开/收起时 DOM 操作更重，也影响屏幕阅读器识别。
立即学习“前端免费学习笔记（深入）”；
-
<main>必须且只能出现一次，它是页面主要内容流的起点 -
<section>应围绕独立语义块（如“服务介绍”“客户案例”），而非单纯为了布局加壳 - 避免用
<div>替代<article>或<aside>，否则媒体查询里做 display 切换时，逻辑容易错乱
rem 基准不能靠 media query 硬编码
只写 @media (max-width: 768px) { html { font-size: 14px; } } 会在 iPad Pro（逻辑宽度 1024px）、安卓平板（800px）、折叠屏（展开后 1200px）上全部失效。真实设备宽度 ≠ 断点数值，而 viewport 宽度才是 rem 计算依据。
动态设置才是可控方案：document.documentElement.clientWidth / 375 * 16，其中 375 是设计稿基准宽度，16 是默认根字体大小（1rem = 16px）。
- iOS 键盘弹出时
clientWidth不变，但视口被压缩，需监听focus事件临时调小font-size - 某些安卓 WebView 不触发
resize，得配合matchMedia('(min-width: 0px)')监听变化 - 媒体查询断点应按内容容器设，比如
@media (min-width: 48em)（即 ≥768px），而不是卡死max-width: 767px
图片和容器宽度必须脱离 px 绝对控制
img { width: 100%; height: auto; } 只解决溢出，不解决加载浪费。小屏加载 2MB 桌面图，首屏时间直接崩。
真正响应式图片要靠 srcset + sizes 让浏览器自己选源：<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">。
- 容器宽度优先用
max-width: 1200px+margin: 0 auto，而不是width: 1200px - 内边距、字体、按钮宽度等随视口变化的属性，用
rem或%；边框、阴影、描边等视觉锚点保留px -
em在嵌套组件里容易放大失控，rem更适合做组件级间距基准
实际落地时，最常被忽略的是：组件的响应式行为必须由结构决定，而不是仅靠 CSS 覆盖。比如一个卡片组件，如果 HTML 里把标题、描述、操作按钮全塞进同一个 <div>，再用 CSS 强行 flex-wrap 或 order 排序，后期维护成本会指数上升。真正的基准，是让每个组件的 DOM 层级本身就具备伸缩弹性。
