CSS Modules 仅解决类名冲突，不提供响应式能力；必须配合 @media 规则实现视口变化响应，且媒体查询在 .module.css 中会自动作用域化。
直接用 CSS Modules 做响应式是可行的，但必须配合媒体查询（@media）和合理的断点设计；单纯靠 className 拆分或变量注入无法触发视口变化时的样式切换。
为什么不能只靠 CSS Modules 的局部作用域？
CSS Modules 只解决类名冲突问题，不提供响应式能力本身。它的输出仍是静态 CSS，要响应屏幕尺寸变化，必须显式写 @media 规则——而这些规则在 CSS Modules 中完全支持，且会自动被作用域化（即不会泄漏到其他组件）。
常见错误现象：
– 写了 .container { width: 100%; } 和 .container-mobile { width: 90%; }，然后靠 JS 切换 class —— 这不是响应式，是手动适配，且容易漏掉 resize 或横竖屏切换；
– 在 JS 里用 useEffect 监听 window.innerWidth 并动态设置 style —— 违背 CSS Modules 的初衷，也难维护。
正确做法是把断点逻辑留在 CSS 层：
立即学习“前端免费学习笔记（深入）”；
- 所有媒体查询写在
.module.css文件里，由构建工具（如 Webpack + css-loader）原生支持 - 避免在 JS 中拼接类名或条件渲染不同 class，保持样式声明式
- 断点值统一管理（例如抽成 JS 常量），再通过
postcss-custom-media或 JS 注入到 CSS 中（需额外配置）
如何在 .module.css 中写可维护的媒体查询？
直接硬编码像素值（如 @media (max-width: 768px)）会导致多处重复、难以全局调整。推荐两种实用方式：
方式一：用 PostCSS 插件统一管理断点（推荐）
安装 postcss-custom-media，在 postcss.config.js 中配置：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
module.exports = {
plugins: {
'postcss-custom-media': {
extensions: {
'--sm': '(max-width: 576px)',
'--md': '(min-width: 577px) and (max-width: 992px)',
'--lg': '(min-width: 993px)'
}
}
}
}
然后在 Button.module.css 中使用：
.button {
padding: 12px 24px;
}
@custom-media --sm;
@custom-media --md;
@custom-media --lg;
@media (--sm) {
.button {
padding: 8px 16px;
font-size: 14px;
}
}
方式二：JS 导出断点，再用 styled-components 风格注入（仅限支持 CSS-in-JS 的构建链路）——但注意：这已脱离纯 CSS Modules 范畴，不推荐混用。
Flexbox/Grid 在 CSS Modules 中的响应式陷阱
CSS Modules 对 display: flex 或 display: grid 完全友好，但要注意：
-
flex-wrap: wrap必须显式声明，否则子元素在小屏下会溢出容器（尤其当设了固定width） -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))在旧版 Android WebView（≤4.4）中不支持，需加@supports回退 - 不要在
:hover上做关键布局切换（移动端无 hover 状态），改用@media (hover: hover)包裹 - 使用
aspect-ratio时，iOS Safari ≤15.4 需用padding-top百分比模拟，且该 hack 在 CSS Modules 中仍有效
为什么 postcss-pxtorem 和 CSS Modules 要配合使用？
移动端高 DPI 屏幕（如 iPhone Retina）下，1px 实际渲染为 2px，导致视觉变粗。用 postcss-pxtorem 把 px 转 rem，再结合动态 font-size 设置（如 document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'），才能让 1px 边框真正“物理像素级”显示。
这个转换发生在 CSS 构建阶段，与 CSS Modules 无冲突——只要你在 .module.css 中写 border: 1px solid #ccc，插件就会把它转成 border: 0.026666rem solid #ccc（假设 rootValue=37.5）。
容易踩的坑：
- 未排除
font-size、line-height等本应保留 px 的属性，导致文字缩放异常 —— 用propList精确控制，例如['*']改为['border', 'border-radius', 'padding', 'margin'] - 第三方 UI 库（如 Ant Design Mobile）的样式未被 postcss-pxtorem 处理，需检查其引入方式是否走同一构建流程
- REM 方案与 viewport 缩放冲突：如果 meta 中写了
user-scalable=yes，用户双指缩放会破坏 rem 基准 —— 生产环境务必设user-scalable=no
最易被忽略的一点：CSS Modules 的 :global 用法在媒体查询嵌套中容易失效。比如 :global(.container) @media (max-width: 768px) { ... } 可能不生效，应改为在顶层定义全局容器类，或全部走模块内选择器。
