响应式样式被覆盖是因为@media未嵌套在@layer内，导致其处于unlayered状态而优先级更高；正确写法是@layer responsive { @media (min-width: 768px) { .card { padding: 2rem; } } }。
响应式样式被覆盖，不是媒体查询失效，而是它没进层——@media规则必须写在@layer块内部，否则默认落在未命名顶层，天然压过你所有显式声明的层。
为什么你的@media规则总被盖掉？
常见现象：@media (min-width: 768px) { .card { padding: 2rem; } }写好了，DevTools里却显示被.card { padding: 1rem; }覆盖。
- 那条基础样式来自第三方库（比如 Bootstrap），且在你的 CSS 之后加载 → 浏览器按源顺序层叠，后加载的赢
- 或者它用了高特异性选择器（如
.layout .card），而你的响应式规则只是单类名 - 更关键的是：你把
@media写在@layer外面 → 它根本没进任何层，属于 unlayered 状态，优先级高于所有显式层
@layer responsive必须嵌套@media，不能只声明层名
错误写法：@layer responsive;后面单独写@media块——这等于没进层。
- 正确写法：
@layer responsive { @media (min-width: 768px) { .card { padding: 2rem; } } } - 层名顺序决定优先级：
@layer reset, base, components, responsive;中，responsive越靠后，里面所有规则（包括@media）优先级越高 - 不能指望文件加载顺序补救：哪怕你把
responsive.css最后引入，如果没用@layer responsive { ... }包裹，照样无效
第三方库（如 Tailwind、Chakra）怎么收编进 layer？
不能只靠@import url("tailwind.css") layer(utilities);——多数构建产物已剥离@layer声明，导入后仍是 unlayered。
立即学习“前端免费学习笔记（深入）”；
- Tailwind v3.4+ 需开启
content扫描并配置layer选项，才能输出带@layer base, components, utilities;的 CSS - Chakra UI v2.8+ 默认导出
@layer chakra;，可直接写@layer chakra, overrides;再定义覆盖规则 - Bootstrap 等传统库没原生支持，稳妥做法是用
@import "bootstrap.css" layer(framework);导入，再在@layer overrides里写响应式修复
检查是否真进了 layer 的唯一方式
打开 DevTools → Elements → 右侧 Styles 面板，看被划掉的规则是否带「layer」标识；没标识的，说明根本没进层。
- 即使写了
@layer responsive，如果@media块不在其花括号内，就不会带标识 - 同名断点跨层时胜负由层顺序决定，而非断点值大小——
@layer a { @media (max-width: 600px) { ... } }不会覆盖@layer b { @media (min-width: 601px) { ... } }，因为不匹配同一条件 - 对关键组件，建议统一断点范围声明，避免漏覆盖
