本文详解为何将媒体查询写在外部会导致样式失效，并演示如何在 SCSS 中通过嵌套方式精准控制 max-width 和 display: grid 等关键响应式属性，确保桌面端布局按预期生效。
本文详解为何将媒体查询写在外部会导致样式失效，并演示如何在 scss 中通过嵌套方式精准控制 `max-width` 和 `display: grid` 等关键响应式属性，确保桌面端布局按预期生效。
在移动优先的 SCSS 开发中，一个常见却容易被忽视的问题是：将媒体查询（@media）写在选择器外部，会导致其无法覆盖内层已声明的样式规则——尤其当目标元素的样式定义在更深层级（如 main .heading）时，外部媒体查询因 CSS 特异性（specificity）不足或作用域错位而失效。
你当前的代码中，媒体查询位于 main 规则之外：
main {
// ... heading 和 cards-container 的样式
}
@media (min-width: 768px) {
.heading { max-width: 540px; } // ❌ 无效：.heading 实际是 main .heading，特异性更低
.cards-container { display: grid; } // ❌ 同样失效，且 grid-template-rows 未适配列布局
}该写法的问题在于：
-
.heading在 CSS 中实际解析为main .heading（嵌套生成），而外部媒体查询中的.heading是独立选择器，特异性低于main .heading； -
display: flex已在main .cards-container中声明，外部display: grid因层级和顺序原因未生效； -
grid-template-rows: repeat(6, 1fr)仅定义行数，但未设置列结构（如grid-template-columns），导致卡片仍垂直堆叠，而非期望的网格分布。
✅ 正确解法：将媒体查询嵌套在对应选择器内部，利用 SCSS 嵌套特性提升特异性并保证作用域精准：
立即学习“前端免费学习笔记（深入）”；
main {
.heading {
max-width: 311px;
text-align: center;
padding-bottom: 7.6rem;
// ✅ 嵌套媒体查询：直接作用于 .heading，特异性等同于父级
@media (min-width: 768px) {
max-width: 540px;
padding-bottom: 5.2rem; // 可选：优化桌面端间距
}
h1 { /* ... */ }
}
.cards-container {
display: flex;
flex-direction: column;
gap: 2.5rem;
padding-bottom: 78px;
// ✅ 嵌套媒体查询：覆盖父级 display 声明，且作用域明确
@media (min-width: 768px) {
display: grid;
grid-template-columns: repeat(2, 1fr); // ? 关键：定义两列布局
grid-template-rows: auto; // ? 避免固定行高，让内容自适应
gap: 1.5rem; // ? 桌面端可缩小间隙
max-width: 900px; // ? 限制总宽度，居中显示
margin: 0 auto; // ? 水平居中
}
.card {
// 卡片基础样式...
@media (min-width: 768px) {
max-width: 250px; // ? 桌面端单卡宽度收缩，适配网格
}
}
}
}? 关键注意事项：
- 必须使用 SCSS 编译器（如 Dart Sass）：嵌套媒体查询是 SCSS 特性，纯 CSS 不支持；
-
grid-template-rows应配合grid-template-columns：仅设行数无法形成二维网格，repeat(2, 1fr)才能实现左右并排； -
移动端
flex-column与桌面端grid兼容性极佳：无需额外重置，@media内覆盖即可； -
避免
!important：嵌套写法天然具备更高特异性，无需强制覆盖。
? 进阶建议：
为提升可维护性，可将断点提取为变量：
$md-breakpoint: 768px;
@media (min-width: $md-breakpoint) { /* ... */ }最终效果：小屏保持垂直堆叠，768px+ 时标题宽度扩大至 540px，四张卡片自动转为 2×2 网格布局，居中对齐、间距优化，真正实现「移动优先、桌面增强」的响应式设计目标。
