响应式媒体模板需同时满足三要素：添加viewport标签、图片设max-width:100%与height:auto、用srcset+sizes按视口加载合适尺寸资源；缺一不可，否则导致缩放错位、变形或带宽浪费。
响应式媒体模板不是“套个框架就行”，核心是让图片、视频等替换元素在任意容器内不撑破、不变形、不浪费带宽。漏掉 viewport 标签或只靠 max-width: 100%，页面在手机上照样会文字小、横向滚动、点击错位。
必须加 <meta name="viewport" content="width=device-width, initial-scale=1">，且放
这是所有响应式媒体生效的前提。没它，浏览器默认按 980px 渲染，img 和 video 再怎么设 max-width 都会被缩放压扁，用户得双指放大才能看清。
- 写成
width=375或塞进里，等于没写 -
initial-scale=1不可省略，某些安卓 WebView 会默认缩放到 0.85 - 别加
user-scalable=no——这不是“防误触”，是锁死可访问性，iOS Safari 某些版本还会因此禁用双击放大 - Vue/React 项目要检查构建后生成的 HTML 源码，public/index.html 里的标签可能被模板覆盖
<img> 必须同时设 max-width: 100% 和 height: auto
只写 max-width: 100% 会导致图片高度被拉伸变形；只写 height: auto 又无法约束宽度。两者缺一不可，且需作用于 <img> 元素本身，不能只靠父容器 flex/grid 布局“以为它会自适应”。
- 如果卡片内有头像，
border-radius直接加在<img>上会裁剪，正确做法是包一层<div style="max-width:90%"> <li>SVG 图片额外加 <code>preserveAspectRatio="xMidYMid meet"，否则折叠屏或异形屏下可能被切掉关键内容 - 用
<picture></picture>做艺术方向控制时，每个<source></source>的media属性必须匹配实际布局断点，不能照搬“768px”这种通用值 -
srcset提供候选图源，单位用w（如"photo-400w.jpg 400w, photo-800w.jpg 800w"），不是px -
sizes告诉浏览器“这张图在不同视口下占多宽”，例如sizes="(max-width: 600px) 100vw, 50vw"表示小屏占满视口、大屏占一半 - 不要把
sizes写成固定值如"300px"，否则 DPR=2 的 iPhone 会选错图（该要 600w 却加载了 300w） - 需要 WebP/AVIF 降级或构图差异时，必须用
<picture></picture>，<img>无法处理格式切换 -
<video></video>加width="100%" height="auto"属性，并配 CSS：video { width: 100%; height: auto; } - 嵌入视频用
<iframe></iframe>时，外层必须包一个容器并设position: relative; padding-bottom: 56.25%（16:9），再让iframe绝对定位填满 - 所有替换元素（包括
<canvas></canvas>）都建议加display: block，避免行内元素默认的基线对齐导致底部多出空白
用 srcset + sizes 替代单 src，否则只是“视觉响应式”
max-width: 100% 只解决显示尺寸，不减少加载体积。小屏手机加载 2000px 宽的图，既慢又费流量。真正响应式必须让浏览器选对资源。
<video></video> 和 <iframe></iframe> 要手动约束，它们不继承父容器弹性
Flex/Grid 容器对 <video></video> 和嵌入的 YouTube <iframe></iframe> 几乎无效。它们默认按原始宽高比渲染，小屏下极易溢出或留黑边。
最常被忽略的是：viewport 标签是否真实存在于最终 HTML 中、srcset 的 w 单位是否写错、以及 <video></video> 是否被当成普通块元素直接塞进 Flex 容器里——这三处不出问题，媒体才真正“响应”。
