在CSS响应式开发中，media query用于根据设备特性匹配不同的样式规则，其优先级判定和嵌套使用规则直接影响最终页面的渲染效果，需要开发者清晰掌握相关逻辑。
media query基础优先级规则
media query本身的优先级遵循CSS常规层叠规则，核心逻辑可以总结为两点：
- 相同选择器的样式，后定义的media query规则会覆盖先定义的规则
- 选择器权重更高的样式，无论是否在media query中，都会优先于权重低的选择器样式生效
比如下面两组样式，最终div在屏幕宽度大于768px时的背景色会是蓝色：
/* 先定义的media query规则 */
@media (min-width: 768px) {
div {
background-color: red;
}
}
/* 后定义的同条件media query规则，会覆盖上面的红色背景 */
@media (min-width: 768px) {
div {
background-color: blue;
}
}
不同条件的media query优先级
当多个media query的条件存在包含关系时，优先级依然遵循后定义覆盖先定义的规则，和条件的范围大小无关。比如下面的例子：
/* 条件范围更大的规则先定义 */
@media (min-width: 768px) {
.box {
width: 80%;
}
}
/* 条件范围更小的规则后定义，会覆盖上面的宽度设置 */
@media (min-width: 1200px) {
.box {
width: 60%;
}
}
当屏幕宽度在768px到1199px之间时，应用80%宽度；当屏幕宽度大于等于1200px时，后定义的60%宽度规则生效，这是后定义覆盖规则的典型体现。
media query嵌套使用说明
CSS原生支持在样式规则内部嵌套media query，也支持media query内部嵌套其他media query，使用时需要注意以下要点：
原生CSS嵌套写法
在原生CSS中，可以直接在选择器内部嵌套media query，不需要重复写选择器：
.card {
padding: 16px;
/* 嵌套media query，屏幕宽度大于768px时调整内边距 */
@media (min-width: 768px) {
padding: 24px;
}
/* 可以继续嵌套其他条件的media query */
@media (min-width: 1200px) {
padding: 32px;
}
}
media query内部嵌套media query
也可以在media query内部再定义新的media query，此时内层规则只有在内外层条件都满足时才会生效：
/* 外层条件：屏幕宽度大于768px */
@media (min-width: 768px) {
.header {
height: 60px;
}
/* 内层条件：屏幕宽度大于768px且是横屏 */
@media (orientation: landscape) {
.header {
height: 50px;
}
}
}
嵌套使用的注意事项
- 嵌套的media query会增加样式维护成本，非必要场景不建议多层嵌套
- 嵌套时依然要遵循后定义覆盖先定义的规则，内层后写的规则会覆盖内层先写的同选择器规则
- 预处理器如Sass、Less中的media query嵌套语法和原生CSS略有差异，使用时需要区分语法规范，避免写错
常见误区说明
很多开发者误以为条件范围更小的media query优先级一定更高，这是错误的。比如下面的情况：
/* 小范围条件先定义 */
@media (min-width: 1200px) {
.text {
font-size: 18px;
}
}
/* 大范围条件后定义，会覆盖小范围的条件设置 */
@media (min-width: 768px) {
.text {
font-size: 16px;
}
}
此时当屏幕宽度大于等于1200px时，最终字体大小是16px，因为后定义的768px条件规则覆盖了先定义的1200px条件规则，和条件的范围大小没有关系。
实际开发中，建议按照从小到大的屏幕宽度顺序定义media query，这样可以利用后定义覆盖的规则，减少不必要的样式覆盖逻辑，让代码更易维护。
CSSmedia_query响应式布局样式优先级修改时间：2026-07-22 00:12:28