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

Question

我正在为我的 ReactJS 应用程序使用 ParticlesJS 包。它显示在开头。我想在屏幕尺寸小于 600px 时隐藏它。它将显示设置为 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; 时，Canvas 的高度设置为 0。

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

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

要解决此问题，您可以在 javascript 代码中收听 window 调整大小事件（如果您正在调整大小）。

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

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

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

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

ParticlesJS component in React is hidden with media queries but not coming back to display

javascript

css

media-queries

reactjs

particles.js