CSS-in-JS中媒体查询应直接用模板字符串写入，如@media (min-width: ${tablet})，使用字符串常量而非动态表达式以保障服务端渲染与样式提取正确。
怎么在CSS-in-JS里写媒体查询
直接用模板字符串插值，把 @media 当普通CSS规则写进去就行。主流方案（如 styled-components、emotion）都支持，语法和原生CSS一致，只是嵌在JS字符串或对象里。
- 在
styled-components中：用反引号包裹样式，@media (min-width: 768px)可以直接写在里面 - 在
emotion的css函数中：同样支持完整@media块，包括嵌套写法 - 别用
typeof window !== 'undefined'手动判断——服务端渲染时window不存在，但媒体查询本身是纯CSS，不触发JS执行，无需条件包裹
为什么不能把断点写成变量再拼字符串
因为大多数CSS-in-JS库在构建时会静态提取样式，动态拼接的字符串（比如 `@media (min-width: ${BREAKPOINT}px)`）会被视为不可分析的运行时值，导致无法提取、压缩，甚至服务端渲染失效。
- 用常量替代变量：定义
const MOBILE_BREAKPOINT = '768px'，然后写@media (min-width: ${MOBILE_BREAKPOINT}) - 避免函数调用：像
@media (min-width: ${getBreakpoint('md')})这种会破坏静态分析 - Emotion 支持
css`@media ${queries.md} {...}`，前提是queries.md是字符串字面量，不是函数返回值
服务端渲染时媒体查询会生效吗
会，但只在客户端生效。服务端只生成静态CSS文本，不执行媒体查询逻辑；实际匹配由浏览器完成。关键在于：服务端生成的CSS必须包含所有可能用到的媒体查询块，否则首屏响应式会“闪动”或错乱。
- 确保所有断点都在初始HTML中输出——不要靠JS运行时注入
- 如果用了
useMediaQuery这类React Hook做逻辑分支，它返回的值在SSR时是默认值（比如false），会导致服务端和客户端渲染不一致，慎用于样式控制 -
styled-components的ServerStyleSheet和emotion的CacheProvider都能正确收集带@media的样式，前提是没用动态表达式破坏提取
多个组件共用同一套断点，怎么维护
抽成独立模块导出字符串常量，而不是CSS-in-JS专用对象或函数。保持“可被静态扫描”的特性最优先。
立即学习“前端免费学习笔记（深入）”；
- 建
src/styles/breakpoints.ts，内容为export const BREAKPOINTS = { mobile: '480px', tablet: '768px', desktop: '1024px' }; - 在组件中直接解构使用：
const { tablet } = BREAKPOINTS;，然后写@media (min-width: ${tablet}) - 别封装成
mq.min('tablet')这类函数——哪怕它看起来更“优雅”，也会让工具链无法识别断点意图 - 如果团队用Tailwind，注意不要把
theme('screens.md')这类配置读取逻辑混进CSS-in-JS，它属于构建时处理，和运行时样式无关
真正容易漏掉的是：媒体查询里的选择器作用域。CSS-in-JS默认启用局部化，但 @media 内部的选择器如果写成全局类名（比如 .header），可能根本不会命中组件内的元素——得用 & 或显式引用生成的className。
