viewport元标签缺失是@media失效的首要原因，因浏览器默认以980px视口渲染移动端页面，导致断点不匹配；@import会阻塞加载且破坏媒体查询上下文；应使用带单位的:root变量配合内联@media实现可控响应式。
viewport 元标签没加，@media 就根本不会生效
所有断点逻辑失效的第一原因，不是 CSS 写错，而是 HTML 缺少或写错了 <meta name="viewport" content="width=device-width, initial-scale=1.0">。浏览器默认以约 980px 的桌面视口渲染移动端页面，哪怕你写了 @media (max-width: 768px)，设备报告的宽度仍是 980px，媒体查询永远不匹配。
常见错误包括：
-
width=320或width=1200—— 硬编码锁死缩放，断点失去响应能力 - 漏掉
initial-scale=1.0—— iOS Safari 可能自动缩放，导致视口宽度计算偏差 - 只写
user-scalable=no—— 部分安卓浏览器会忽略整个标签
@import 声明断点文件？别这么做
@import 是同步阻塞加载，且无法条件执行。你写 @import url("mobile.css") screen and (max-width: 768px)，浏览器仍会下载 mobile.css，哪怕当前是桌面视口。更严重的是，Webpack、Vite 等构建工具在编译期就展开 @import，媒体查询上下文丢失，最终所有样式全量注入，断点逻辑彻底失效。
实际后果是：断点失效 + 额外请求 + 渲染阻塞 + DevTools 里看不出哪条规则该在哪生效。
立即学习“前端免费学习笔记（深入）”；
纯 CSS 场景下，@import 不能传递变量、不能做逻辑判断，它只是文件合并指令，不是模块系统。
用 :root 自定义属性 + @media 覆盖才是可控方案
真正可维护的做法，是在 :root 中定义带单位的断点变量（如 --breakpoint-md: 768px），再在 @media 块内重设其他变量（比如间距、字体大小），让组件类通过 var(--space-card) 继承。
关键约束：
- 变量必须带单位：
--breakpoint-sm: 768px✅，--breakpoint-sm: 768❌（@media (min-width: var(--breakpoint-sm))无效） - 不要在
@media中直接引用断点变量做媒体查询判断，只能用于calc()或样式声明 - 断点值应来自实测——拖动 Chrome DevTools 宽度滑块，记录文字溢出或布局断裂的精确像素（如
482px），而非四舍五入成480px
单文件内联 @media 比拆分 CSS 更可靠
把断点逻辑紧贴组件样式写，比用 <link media="..."> 引入多个 CSS 文件更可控。例如：
button {
padding: 0.5rem 1rem;
@media (min-width: 768px) {
padding: 0.75rem 1.5rem;
}
@media (min-width: 1024px) {
padding: 1rem 2rem;
}
}
这样做的好处：
- 每个断点只影响当前选择器，避免全局污染
- 构建工具能正确提取并压缩冗余声明
- DevTools Styles 面板里能直接看到某条规则被哪个
@media包裹 - 无需管理多个 HTTP 请求和加载顺序
断点值本身不是设备尺寸，而是内容临界点；真正难的不是写对语法，而是找出那个让布局“刚好撑开”或“开始换行”的像素值——它得靠眼睛看，而不是查文档。
