media queries 必须写在 css 规则中才生效，包括外部 css 文件、 标签内或内联样式（不推荐）；不可置于 js 字符串或 html 属性中，且 width 优于 device-width，范围查询应避免 min-width 与 max-width 混用导致覆盖混乱。
media queries 写在哪才生效
必须写在 CSS 里，不能直接塞进 HTML 的 <style></style> 标签外，也不能当 JS 变量用。浏览器只认 CSS 规则里的 @media 块。
- 正确位置：CSS 文件中、
<style></style>标签内部、或内联样式（不推荐） - 常见错误：把
@media (max-width: 768px) { ... }写在 JS 字符串里，或当成 HTML 属性加在<div media="..."> 上——这完全无效<li>HTML 中唯一合法的媒体相关属性是 <code><link media="...">，但它只控制整张样式表是否加载，不参与样式条件判断 -
width对应viewport设置后的视口宽度，比如设置了<meta name="viewport" content="width=device-width">后，它就等于设备逻辑像素宽 -
device-width是物理屏幕分辨率除以 devicePixelRatio 后的值，受缩放、横竖屏切换影响大，行为不稳定 - 现代项目中用
device-width容易踩坑：iOS Safari 横屏时可能触发错误断点；安卓部分浏览器根本不支持 - CSS 是自上而下解析的，后面规则会覆盖前面同权重的规则
- 别这么写：
@media (max-width: 768px) { .box { width: 100%; } }和@media (min-width: 480px) { .box { width: 50%; } }—— 在 480–768px 区间，后者生效，但你可能以为前者优先 - 更稳妥的做法是用范围写法：
@media (min-width: 480px) and (max-width: 768px)，或者统一用min-width递增（移动端优先） - 注意：IE9+ 支持
and，IE8 及以下不支持任何@media查询 - ✅ 正确：
@media (min-width: 768px) { .item { width: calc(var(--base-width) * 2); } } - ❌ 错误：
@media (min-width: calc(100vw / 2)) { ... }—— 浏览器直接忽略整个@media块 - ⚠️ 注意：Sass/Less 等预处理器允许在
@media外层做计算，但编译后仍是静态值；真正在运行时动态响应视口变化的，只能靠 JS 配合window.matchMedia()
width 和 device-width 到底该用哪个
日常响应式布局几乎全用 width（即 viewport 宽度），device-width 基本可以忽略。
min-width 和 max-width 混用会冲突吗
不会自动冲突，但叠加顺序和选择器权重决定最终效果，很多人栽在“以为写了就覆盖”上。
媒体查询里能用 calc() 或变量吗
可以，但有限制：CSS 变量（--xxx）能用，calc() 能用，但它们不能出现在 @media 条件表达式本身里。
实际项目里最容易被忽略的是 viewport meta 标签没配对，或者用了 device-width 却没测横竖屏切换。media queries 不是魔法，它只响应 CSS 视口，不是设备屏幕。
