@media样式不生效主因是被外部同名规则覆盖，因其不提升优先级，仅控制应用时机；关键在声明顺序和选择器特异性，需确保媒体查询块置于基础样式之后并保持选择器权重一致。
媒体查询里的样式不生效，大概率不是写错了，而是被外部同名规则盖掉了——@media本身不提升优先级，只控制“何时应用”，真正起作用的还是层叠顺序和选择器权重。
为什么@media里的样式会被外面的覆盖？
浏览器处理CSS时，把@media块内规则当作普通样式参与层叠，它不自带更高权重。关键看两点：
- 声明顺序：如果
.test { color: blue; }写在@media块之后，哪怕媒体查询条件满足，它也会覆盖@media里同选择器的color: green; - 选择器特异性：比如外部是
main .test，而@media里只写了.test，前者权重更高，后者直接失效
检查并修正CSS文件内的声明顺序
打开你的.css文件，确保媒体查询块放在所有对应基础样式之后。不要倒着写：
/* ❌ 错误：基础样式在@media后面，会覆盖它 */
.test { color: blue; }
@media (max-width: 768px) {
.test { color: green; }
}
<p>/<em> ✅ 正确：基础样式在前，媒体查询在后 </em>/
.test { color: blue; }
@media (max-width: 768px) {
.test { color: green; }
}
</p>
- 即使基础样式和
@media里用的是完全相同的选择器，顺序也决定谁赢 - 构建工具（如Vite）按
import顺序拼接CSS，所以import './base.css'; import './responsive.css';比在单个文件里乱序更可靠
匹配或拉平选择器特异性
媒体查询内外的选择器必须“可比”，否则权重差一级，顺序再对也没用：
- 如果基础样式是
section .card-title（权重 0,0,2,1），@media里不能只写.card-title（0,0,1,0） - 改成
section .card-title或.card .card-title保持一致，或干脆用:is(section .card-title, .card-title)统一权重 - 避免无谓嵌套：
.header nav ul li a和.nav-link效果相近，但前者权重高、难维护，后者更利于媒体查询对齐
警惕第三方库和构建工具的隐性干扰
你以为顺序对了，但实际加载顺序可能被悄悄改写：
- Vite 的
css.preprocessorOptions或 Webpack 的mini-css-extract-plugin可能重排输出顺序，要检查最终生成的index.css - 某些 UI 库（如 Tailwind）默认启用
@layer，如果你没用@layer components包裹自定义响应式规则，它们可能被归入更低层级 - Vue 的
<style scoped></style>会让媒体查询失效——scoped 样式加了属性选择器，而@media块里没同步带上，得用:deep(.test)或移出 scoped 范围
最常被忽略的一点：媒体查询是否真的触发了？别只看 DevTools 的 Styles 面板，去 Computed 面板确认那条样式有没有灰色“inherited”标记，或者是不是根本没出现在列表里——那说明查询条件没命中，或者文件压根没加载成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
