Gatbsy:CSS媒体查询在开发中有效，但在生产中无效

Question

我正在使用Gatsby，并使用媒体查询根据屏幕大小(桌面与移动导航(在标题中隐藏/显示不同的元素。

这是图像标签：

<StaticImage
height={50}
className="ccslogo-mobile"
placeholder="none"
src="../images/CCS-logo-lime.png"
width={50}
/>

这是CSS：

@media screen and (min-width: 1191px) {
.ccslogo-mobile {
display: none;
}

在开发过程中，该元素成功地隐藏在桌面上，但当我部署到生产环境时，该元素会显示出来，甚至在桌面上也是如此。在桌面上查看时，我的字体大小似乎也被渲染为移动大小(同样仅限于生产(。

Answer 1

我能够通过将图像包装在div中并将类应用于div来解决这个问题。