next.js中css modules移动端适配关键在于确保viewport标签存在、媒体查询正确嵌套以避免类名隔离失效、高dpr屏幕用transform缩放替代device-pixel-ratio查询，并优先用css而非js处理样式响应式。
Next.js 里用 CSS Modules 写移动端样式，关键不是“怎么写”，而是“怎么确保它真能生效”——很多问题出在媒体查询没触发、CSS 优先级被覆盖、或 viewport 标签缺失。
为什么 @media (max-width: 768px) 在手机上不生效？
最常见原因是页面缺少 <meta name="viewport" content="width=device-width, initial-scale=1">。Next.js 默认不自动注入这个标签，必须手动加到 app/layout.tsx 或 pages/_document.tsx 的 中。
另一个容易忽略的点：CSS Modules 默认启用局部作用域，但媒体查询里的选择器如果写成 .container { ... } @media (max-width: 768px) { .container { ... } }，两个 .container 实际编译后是不同类名（如 Home_container__abc123 和 Home_container__def456），导致断点样式不继承。
- 正确写法：把媒体查询嵌套在原选择器内，例如
.container { width: 100%; @media (max-width: 768px) { width: 100vw; padding: 0 16px; } } - 如果你用的是
postcss-preset-env或tailwindcss，注意它们对嵌套语法的支持程度；纯 CSS Modules 原生不支持嵌套，需搭配postcss-nested - 验证是否生效：在 Chrome DevTools 的 Elements 面板中，勾选 “Toggle device toolbar”，再检查对应元素的 computed styles 是否包含断点内的声明
如何让 CSS Modules 在移动端适配不同 DPR（设备像素比）？
单纯用 px 单位在高 DPR 屏幕（如 iPhone 14 Pro）上会显得模糊，但直接换 rem 或 em 又可能破坏 Next.js 默认的字体缩放逻辑。稳妥做法是：基础尺寸用 px，图片和边框等敏感元素用 1px 模拟，配合 transform: scale(0.5) 适配 2x 屏幕。
- 推荐方案：定义一个
@mixin hairline-border（需 PostCSS 插件支持），或直接写border: 1px solid #ccc; transform: scaleY(0.5); transform-origin: 0 0; - 避免在 CSS Modules 中用
device-pixel-ratio媒体查询，因为 Safari 对resolution支持不稳定，且 Next.js SSR 渲染时无法获取客户端 DPR - 图标类小图建议用
next/image并设置sizes属性，由浏览器自动选高清资源，而不是靠 CSS 控制
使用 useMediaQuery Hook 配合 CSS Modules 有没有必要？
没必要为纯样式切换引入 JS 逻辑。CSS Modules + 媒体查询完全能胜任布局、间距、显隐等响应式需求。只有当你需要根据屏幕尺寸动态修改组件行为（比如在移动端关闭某个动画、切换数据加载策略），才该用 useMediaQuery（来自 @react-hook/media-query 或自定义）。
- 滥用场景举例：用
useMediaQuery控制一个按钮的display: none→ 应该直接用@media写在 CSS Module 里 - 真正适合 JS 的场景：移动端点击区域放大（防止误触）、触摸事件绑定/解绑、懒加载阈值调整
- 注意 SSR 兼容性：所有基于
window.innerWidth的判断在服务端渲染时会返回undefined，必须加typeof window !== 'undefined'守卫
移动端适配最常被绕开的细节是字体可访问性——别为了“看起来更小”而把 font-size 锁死在 12px，iOS Safari 会无视小于 16px 的字号缩放设置。留出弹性空间，比强行“还原设计稿”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
