选择器本身无法实现响应式，必须配合@media规则，因为选择器只负责选中元素，不感知屏幕尺寸等条件；响应式本质是在特定条件下应用样式，该条件只能由@media提供。
直接用选择器本身无法实现响应式，必须配合 @media 规则——这是最容易被忽略的前提。
为什么不能只靠选择器做响应式？
CSS选择器只负责“选中元素”，不感知屏幕尺寸、设备类型或用户交互。所谓“响应式”，本质是“在特定条件下应用样式”，这个“条件”只能由 @media 提供。
- 写
.header { display: flex; }不会自动在小屏变block，它永远生效 -
:hover在触摸设备上无触发机制，:focus在 iOS Safari 中常被跳过，不能当作响应式交互依据 - 依赖
nav ul li a这类结构选择器做断点样式，一旦 HTML 增加一层包裹（比如加个<div class="nav-wrapper">），整个规则就失效
用类选择器 + @media 控制组件行为
把响应式逻辑绑定到语义化类名上，而不是 DOM 层级。这样改 HTML 不影响样式，维护成本低。
- 给按钮加
.btn类，而不是靠button标签匹配 - 移动端让按钮占满宽度：
@media (max-width: 768px) { .btn { width: 100%; } } - 断点值基于实测设备宽度，不是照搬 Bootstrap 的
sm/md—— 比如你发现 iPad Mini 竖屏实际宽度是 744px，那就用744px而非768px - 避免在一个
@media块里堆砌所有组件样式；按组件拆分，比如.card的响应式规则和.nav的分开写
子选择器 > 防止样式穿透
当需要在断点内只影响某一层级的子元素时，> 比空格（后代选择器）更安全、性能更好。
立即学习“前端免费学习笔记（深入）”；
-
.container > div只匹配直接子<div>，不会误伤嵌套更深的<div> - 桌面端两列：
@media (min-width: 768px) { .container > div { width: 50%; float: left; } } - 移动端堆叠：
@media (max-width: 768px) { .container > div { width: 100%; margin-bottom: 10px; } } - 浏览器不用遍历整棵 DOM 树，渲染更快；特异性也比
.container div高，覆盖冲突更可控
属性选择器适配动态内容
当响应式行为由数据驱动（比如后端返回不同设备标记），用属性选择器比硬编码类名更灵活。
- HTML 中带
data-device="mobile"：<img src="desktop.jpg" data-device="mobile" data-src-mobile="mobile.jpg"> - 小屏加载移动图：
@media (max-width: 480px) { img[data-device="mobile"] { content: attr(data-src-mobile); } } - 注意：不要用
[src$=".webp"]这类纯文件名判断做响应式，CDN 或构建工具可能重命名资源，导致规则失效
真正难的不是写出能跑的响应式代码，而是让每条规则都有明确作用域、不随 HTML 结构微调而崩坏。类名语义化、断点值实测、层级控制用 >、动态逻辑走 data- 属性——这些细节才是长期可维护的关键。
