javascript - React 中的 ParticlesJS 组件隐藏了媒体查询但不会返回显示

Question

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

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; 时，Canvas 的高度设置为 0。

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

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

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

但如果您要针对移动设备修复此问题，那么您可以在 javascript 本身内部检查窗口宽度，并有条件地渲染粒子组件。

此外，如果您为 Particles 组件提供“固定”高度作为 Prop ，您的媒体查询将起作用。

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