CSS隔离不解决响应式问题，而是确保响应式样式（如@media、rem、flex断点）不被全局样式污染；CSS Modules通过哈希类名锁定作用域，使响应式规则仅作用于自身组件，避免跨组件干扰。
CSS 隔离本身不直接解决响应式问题，它解决的是“谁的样式能作用到谁身上”——响应式表现（如 @media 规则生效、rem 计算、flex 布局断点）是否被意外覆盖或干扰，取决于样式作用域是否干净。
响应式样式被污染的典型现象
你写了 @media (max-width: 768px) { .card { display: flex; } }，但页面在小屏下仍是块状堆叠。排查发现：另一处全局 CSS 中的 .card { display: block !important; } 覆盖了你的媒体查询规则；或者 Ant Design 的 .ant-card 样式里定义了同名类却没加 @media，导致小屏时优先级更高、覆盖更彻底。
- 媒体查询规则被同名类的非响应式声明“压死”，尤其当后者带
!important或权重更高时 - 根字体大小（
html { font-size: ... }）被第三方库重置，导致整个rem响应链失效 - Flex/Grid 容器类（如
.container）在多个组件中重复定义，不同断点下的flex-direction相互覆盖
CSS Modules 怎么守住响应式边界
它不改写你的 @media 逻辑，而是让这些逻辑只绑定到你可控的类名上。比如你在 Card.module.css 里写：
.root {
display: grid;
}
@media (max-width: 768px) {
.root {
display: flex;
flex-direction: column;
}
}
构建后，.root 变成 .Card_root_abc123，而 Ant Design 的 .ant-card 或其他团队写的 .card 类完全不会匹配这个选择器 —— 你的响应式规则从此只对你自己的组件生效。
立即学习“前端免费学习笔记（深入）”；
- 所有
@media、calc()、clamp()等响应式语法照常工作，只是作用范围被锁死了 - 避免了“为适配小屏加了
display: flex，结果全局div.card全部变 flex”的连带影响 - 调试时能在 DevTools 里清晰看到
.Card_root_abc123对应哪段源码，而不是在一堆.card中盲找
:global() 是双刃剑：用错会毁掉响应式隔离
当你需要穿透隔离去定制第三方组件（比如 Ant Design 的 Select 下拉宽度），用 :global(.ant-select-dropdown) 是必要手段。但这里极易出错：
- 写成
:global(.ant-select-dropdown) { width: 100%; }→ 全局生效，所有 Select 下拉都变宽，破坏原有响应逻辑 - 正确做法是包裹在局部容器内：
.my-select :global(.ant-select-dropdown) { width: 100%; }，这样只有加了my-select类的 Select 才受影响 - 如果在
@media块里用:global，必须确认外部容器类也参与了媒体查询判断，否则断点可能失效
真正关键的不是“用了隔离”，而是隔离后是否还留着裸露的全局钩子 —— 比如一个没加前缀的 body 重置、一段未包裹的 :global()、或动态拼接的 className 漏掉了模块化引用。这些缝隙，才是响应式样式悄悄被污染的地方。
