HTML在线工具中媒体查询常因缺失viewport标签或无法模拟DPR/横竖屏而失效；必须手动添加<meta name="viewport" content="width=device-width, initial-scale=1.0">并用Chrome DevTools设备工具栏校验。
在 HTML 在线运行工具（如 CodePen、JSFiddle、CodeSandbox 或浏览器开发者工具的实时编辑器）中，媒体查询本身能生效，但**多数情况下无法真实模拟设备 DPR、viewport 行为或横竖屏切换细节**——校验结果容易误判，必须手动补全关键前提。
viewport meta 标签必须手写且放 最前面
在线工具默认不注入 <meta name="viewport">，哪怕你写了 @media (max-width: 768px)，在模拟移动端时也会按 980px 虚拟视口渲染，断点完全不触发。
- 务必在
<head>开头手动添加：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 删掉所有
user-scalable=no、maximum-scale=1.0—— 它们会让 Chrome DevTools 的缩放模拟失效 - 不要用
width=375这类固定值，device-width才能响应真实设备逻辑 - 这个标签不能放在
<script>后面，也不能用 JS 动态插入
Chrome DevTools 的 Toggle device toolbar 是唯一可靠校验方式
在线工具内置的“响应式预览”大多只改 window.innerWidth，不改 viewport width、不触发 orientation 变化、也不模拟 DPR 切换，所以 @media (orientation: landscape) 或 @media (min-resolution: 2dppx) 基本白写。
- 打开 Chrome，右键 → “检查” → 点击左上角
Toggle device toolbar（或 Ctrl+Shift+M） - 选真实设备（如 “Pixel 4”），它会同步设置 viewport、DPR、user agent 和 orientation
- 拖动窗口宽度时，观察 CSS Rules 面板里哪些
@media规则被激活（带小眼睛图标） - 用
Ctrl+Shift+P输入 “Capture node screenshot” 截图，比对不同宽度下布局是否真断点
避免在在线工具里测试 srcset + sizes
srcset 和 sizes 的加载决策依赖浏览器对渲染宽度的实时计算，在线运行环境常因 iframe 沙箱、无真实 layout flow 或缺失 Sec-CH-DPR header 导致误判。你看到的“加载了 2x 图”，可能是 fallback 而非真实匹配。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖在线工具 Network 面板里的图片请求判断
srcset是否生效 - 真要验证，必须在本地
file://或http-server启的服务下，用 Chrome DevTools 的 Network → Img 过滤 +img.currentSrc控制台打印确认 - 在线工具里可写
<img src="fallback.jpg" srcset="a.jpg 400w, b.jpg 800w" sizes="(min-width: 768px) 300px, 100vw">，但仅用于结构检查，不用于加载逻辑测试
断点值别抄模板，直接拖浏览器窗口找临界点
在线工具里最有效的校验动作，是把代码粘过去后，**关掉所有预设设备模式，纯靠拖拽浏览器窗口宽度，肉眼盯内容何时错乱**——那才是你的断点该设的位置。
- 标题文字开始换行？记下此时宽度（如 423px）→
@media (max-width: 423px) - 三列卡片塌成两行？那个宽度就是断点，不是 “应该用 768px”
- 优先用
min-width写法：@media (min-width: 424px)，符合移动优先，也避免max-width层叠覆盖问题 - 单位用
em更稳妥：@media (min-width: 40em)，它随用户系统字体设置变化，px断点在缩放后会漂移
真正卡住人的从来不是语法写错，而是 viewport 缺失导致整个媒体查询链失效，或是拿在线工具当真机用——它连横屏事件都发不全，更别说折叠屏展开检测了。
