原生 CSS 嵌套不能替代媒体查询，@media 必须顶层独立声明；错误地将 @media 写入类内会导致真机失效；正确用法是 @media 平级声明并配合 & 复用父选择器，嵌套仅为语法糖，不解决逻辑问题。
原生 CSS 嵌套不能简化或替代媒体查询本身，它只负责组织选择器结构；你仍需独立书写 @media 规则，且不能把它们塞进类内部——否则真机上直接失效。
嵌套语法和媒体查询必须分家，不能混写
常见错误是把 @media 写在类定义里，比如：
.header {
color: #333;
@media (max-width: 768px) {
font-size: 14px;
}
}
这段代码在纯 CSS 文件中完全无效。浏览器会忽略整个 @media 块，因为 @media 是 at-rule，必须与选择器平级，不能作为类的“子属性”。Sass/Less 支持这种写法，但那是预处理器编译后的产物，不是原生 CSS 行为。
- ✅ 正确写法：
@media独立顶层声明，显式写出目标选择器 - ❌ 错误认知：“嵌套让响应式更简洁”——它只让选择器更紧凑，不改变媒体查询的语法约束
- ⚠️ 真机测试时失效，99% 是因为这个结构错误，而非 viewport 或断点值问题
用 & 在媒体查询内复用父选择器，避免重复书写
当你有一组组件在不同断点下都需要调整多个子元素样式时，& 能减少冗余前缀。例如：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.product-card {
&__title { font-size: 16px; }
&__price { margin-top: 8px; }
&__actions { display: flex; }
}
}
这等价于手动写：.product-card__title、.product-card__actions 等完整类名，但可读性和维护性更好。
-
&在@media块内依然代表外层选择器（这里是.product-card），不是当前媒体查询本身 - 不要写成
.product-card { @media (...) { &__title { ... } } }——嵌套层级错，语法非法 - 如果项目已用 BEM，这种写法能自然对齐命名习惯，无需额外抽象
移动端优先 + 嵌套组合：基础样式写在顶层，增强逻辑放 @media (min-width: ...)
嵌套本身不改变移动优先策略，但它能让“增强部分”的选择器更聚焦。例如：
.search-bar {
padding: 8px 12px;
input { width: 100%; }
@media (min-width: 768px) {
display: flex;
input { width: 240px; }
}
}
注意两点：
- 基础样式（小屏）直接写在
.search-bar下，不包@media，这是移动优先的起点 -
@media (min-width: 768px)是增强，里面所有规则都自动继承.search-bar上下文，input不会意外匹配到页面其他input - 别用
max-width反向覆盖——容易漏掉未声明的属性，导致样式残留
真正容易被忽略的是：嵌套不会帮你判断该不该加 position: relative，也不会自动修正伪元素的 content: "" 缺失；它只是语法糖，不是逻辑引擎。重构时，先确保定位上下文、viewport 标签、断点合理性都已就位，再用嵌套收拢选择器——否则越“简洁”，越难 debug。
