媒体查询应写在CSS文件中更合理，避免HTML膨胀和维护困难；须配合viewport meta标签使用width而非device-width；断点推荐移动端优先、单向min-width递增；CSS变量可在媒体查询内定义但不可用于条件判断。
媒体查询写在CSS里还是HTML里更合理
直接写在CSS文件中更合理，避免HTML膨胀和维护困难。内联样式或标签里写媒体查询虽可行，但违背关注点分离原则，也不利于缓存复用。
常见错误是把媒体查询逻辑拆到多个标签中，比如：
这种写法会触发多次HTTP请求，且CSS优先级难控，容易导致样式冲突或覆盖遗漏。
- 推荐统一收口在主CSS中，用
@media嵌套规则 - 移动端优先（mobile-first）时，基础样式不加媒体查询，只对大屏做
@media (min-width: 769px)增强 - 若必须分文件，用
rel="preload"预加载关键CSS，而非多个rel="stylesheet"
width和device-width在媒体查询中到底该用哪个
width匹配的是**视口宽度（viewport width）**，device-width匹配的是设备物理屏幕宽度（含像素比影响），实际开发中几乎不用device-width。
立即学习“前端免费学习笔记（深入）”；
典型错误：写@media screen and (max-device-width: 480px)，结果在iPhone上不生效——因为iOS Safari默认视口宽度是980px，不是设备物理宽度375px或414px。
- 务必配合
使用width -
device-width无法响应用户缩放、横竖屏切换等动态变化，行为不可预测 - 现代响应式布局只依赖
width+viewportmeta，这是事实标准
如何避免媒体查询断点互相覆盖或遗漏
断点重叠或留白会导致样式在某些宽度下完全失效，比如同时写了(max-width: 768px)和(min-width: 768px)，768px这个临界值会命中两个规则，CSS层叠顺序决定谁胜出，极易出错。
正确做法是用「区间不重叠 + 移动端优先」结构：
@media (min-width: 769px) {
.container { width: 750px; }
}
@media (min-width: 992px) {
.container { width: 970px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}
- 所有断点用
min-width单向递增，不混用max-width - 基础样式（
0px–768px）直接写在媒体查询外，作为默认态 - 断点数值建议用设计稿常用尺寸（如768、992、1200），不要硬套设备型号
媒体查询里能用CSS自定义属性（CSS变量）吗
可以，但要注意作用域和计算时机：CSS变量在媒体查询内声明是有效的，但不能在媒体查询条件中使用变量（例如@media (min-width: var(--breakpoint))是非法语法）。
常见误用是试图用JS动态改变量来“驱动”媒体查询切换，这行不通——媒体查询是CSS解析时静态匹配的，不响应运行时变量变更。
- 可在媒体查询块内定义/覆盖变量，用于内部样式复用：
:root { --gap: 1rem; } @media (min-width: 769px) { :root { --gap: 2rem; } } - 需要动态响应时，用JS监听
matchMedia()，再手动切换class或修改style - 别在
@media条件里写表达式或函数，只支持字面量和简单比较
viewport meta标签缺失或写错，导致整个媒体查询逻辑在移动浏览器里形同虚设。其次就是断点用max-width写死后，忘了后续增强规则要用min-width接续，结果样式在中间宽度段彻底失控。 
