媒体查询只是条件开关，真正实现响应式的是配合的CSS规则；必须写在CSS中，常用width而非device-width，推荐统一用min-width递增断点，断点应由内容决定而非设备类型。
媒体查询本身不“让元素响应式”，它只是条件开关；真正让元素响应式的，是配合它写的 CSS 规则（比如 width: 100%、flex-wrap、grid-template-columns）——没这些，@media 就是空壳。
媒体查询必须写在 CSS 里，不能塞进 HTML 或 JS
浏览器只解析 CSS 文件、<style> 标签内部或内联 style 属性里的 @media 块。常见错误包括：
- 把
@media (max-width: 768px) { ... }当成字符串写进 JS 变量里，比如const mq = "@media...";—— 完全无效 - 在 HTML 标签上加
media="..."属性，如<div media="(max-width:768px)">—— 这不是标准属性，浏览器忽略 - 只靠
<link rel="stylesheet" href="a.css" media="screen">控制样式表加载，却指望它能做细粒度样式切换 —— 它只决定整张 CSS 是否引入，不参与具体规则匹配
用 width，别用 device-width
日常开发中几乎全部用 width（即 viewport 宽度），device-width 在现代项目里基本是坑：
-
width对应你设置的<meta name="viewport" content="width=device-width">后的逻辑视口宽度，稳定可预期 -
device-width是设备物理像素除以devicePixelRatio的结果，横竖屏切换时值会跳变（比如 iOS Safari 横屏后device-width可能比竖屏还小），导致断点错乱 - 安卓部分旧浏览器压根不支持
device-width查询
正确写法：@media screen and (max-width: 768px)；错误写法：@media screen and (max-device-width: 768px)。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
min-width 和 max-width 混用容易覆盖失效
CSS 是自上而下解析的，同权重规则后面覆盖前面。混用时极易误判生效逻辑：
- 写了
@media (max-width: 768px) { .box { width: 100%; } }和@media (min-width: 480px) { .box { width: 50%; } }，那么在 480–768px 区间，width: 50%生效 —— 不是你直觉以为的“小屏优先” - 更可靠的做法是统一用
min-width递增（移动优先）：@media (min-width: 480px)→@media (min-width: 768px)→@media (min-width: 1024px) - 或者明确写范围：
@media (min-width: 480px) and (max-width: 768px)，但注意 IE8 及以下完全不支持and
断点不是越多越好，关键看内容撑开逻辑
所谓“手机 ≤767px、平板 768–1023px、桌面 ≥1024px”只是常见参考，实际断点应由内容决定：
- 一段文字在 320px 下换行难看？那就设
@media (min-width: 375px)调整font-size或line-height - 三列卡片在 600px 宽度下挤成两行？那就用
@media (max-width: 600px)改为单列flex-direction: column - 图片超出容器？优先用
img { max-width: 100%; height: auto; }，而不是靠媒体查询硬切尺寸
真正容易被忽略的是：媒体查询响应的是视口变化，不是设备类型；旋转屏幕、缩放页面、分屏窗口都会触发重计算——所以别用 JS 一次性检测 window.innerWidth 来模拟，那根本不是响应式。
