React 中的 ParticlesJS 组件通过媒体查询被隐藏，但不会返回显示

Question

我正在为我的ReactJS应用程序使用ParticlesJS包。它显示在开头。我想在屏幕尺寸低于 600 像素时隐藏它。它将显示设置为 none，但是当屏幕大小调整回 600px 以上时，粒子元素不会将显示设置回块，因此不会再次显示。

html/jsx：

<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-content"> 
<img src="./src/style/img/logo_banner.png" />
</div>
</div>

.css：

@media only screen and (max-width: 600px) {
.particles-container .particles {
display: none;
}
}
@media only screen and (min-width: 600px) {
.particles-container .particles {
display: block;
}  
} 

Answer 1

深入研究后，我看到当通过媒体查询设置display: none;时，画布的高度设置为 0。

我将不得不深入研究更多，以获得为什么会发生这种情况的正确答案。将返回对此答案的更新，并对此进行适当的解释。

继续，当您的媒体查询设置display: block;画布的高度仍保持 0 时，因此您无法看到它。

要解决此问题，您可以在 javascript 代码中侦听窗口调整大小事件(如果您正在调整大小(。

但是，如果您要为移动设备解决此问题，则可以在javascript本身中检查窗口宽度，并有条件地渲染Particles组件。

此外，如果您为粒子组件提供"固定"高度作为道具，则媒体查询将起作用。

在这里，您可以看到一个演示：https://codesandbox.io/s/rw8666x11o