Gatsby问题：CSS媒体查询在开发环境生效但生产环境失效

1. 检查CSS类名匹配与优先级 #

Gatsby生产构建会自动压缩混淆CSS类名，如果你的样式是通过CSS Modules引入，硬编码的.ccslogo-mobile可能和编译后的类名不匹配。

• 解决：如果用CSS Modules，组件里要通过styles.ccslogo-mobile绑定类名；如果是全局CSS，给类名增加父元素选择器提升优先级（比如.site-header .ccslogo-mobile），或者临时添加!important验证是否是优先级问题。

2. 补全媒体查询规则 #

目前你只定义了桌面端隐藏的规则，要确保移动端默认显示的规则存在，且没有被其他样式覆盖：

/* 移动端默认显示 */
.ccslogo-mobile {
  display: block;
}

/* 桌面端隐藏 */
@media screen and (min-width: 1191px) {
  .ccslogo-mobile {
    display: none;
  }
}

同时检查全局样式（比如reset.css、第三方UI库）是否篡改了display属性。

3. 确认viewport元标签配置 #

生产环境下缺失正确的viewport会导致媒体查询失效，在html.js或gatsby-ssr.js中确保添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有这个标签，桌面浏览器可能会以移动端宽度渲染，触发错误的媒体查询规则。

4. 清理构建缓存 #

Gatsby生产构建可能残留旧缓存，执行以下命令重新构建并本地模拟生产环境测试：

gatsby clean && gatsby build && gatsby serve

如果本地模拟生产环境问题消失，说明是线上缓存导致，需要清理CDN或服务器缓存。

5. 改用组件层面的显示控制 #

如果CSS媒体查询始终有问题，可以直接用React钩子动态控制StaticImage的渲染，彻底绕过CSS兼容性问题：

import { useMediaQuery } from '@react-hook/media-query';

const YourHeaderComponent = () => {
  const isDesktop = useMediaQuery('(min-width: 1191px)');

  return (
    <header>
      {/* 仅移动端显示 */}
      {!isDesktop && (
        <StaticImage
          height={50}
          className="ccslogo-mobile"
          placeholder="none"
          src="../images/CCS-logo-lime.png"
          width={50}
        />
      )}
      {/* 桌面端元素 */}
    </header>
  );
};

6. 排查字号异常问题 #

桌面端显示移动端字号，通常是媒体查询的字号规则未生效：

• 检查是否把桌面端的min-width写成了max-width；
• 确认桌面端字号规则的优先级高于移动端；
• 用浏览器开发者工具查看元素的计算样式，找到覆盖字号的源头样式。

内容的提问来源于stack exchange，提问作者juju