0

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

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;
  }  
}
4

1 回答 1

1

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

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

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

要解决此问题，您可以在 javascript 代码中侦听窗口大小调整事件（以防您调整大小）。

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

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

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

于 2018-09-13T06:19:59.720 回答