为什么我的 React 站点大小调整不正确？

Question

我一直在使用 React 创建我自己的专业网站。有了这个，我想要一个很酷的背景，我决定在其中使用 https://www.npmjs.com/package/react-particles-js

我遇到的唯一问题是，在移动设备上，粒子不会填满屏幕，而是似乎卡在屏幕顶部。查看此内容的最简单方法是转至 https://my-app-bwp36ovux.vercel.app/ 并在您的显示器上查看该站点，然后使用 F12 调试控制台将其更改为移动设备。这样做时请注意背景中的漂浮粒子。

我得到了我用来设置粒子值的常量

const particalOpt = {
  particles:{
    number:{
      value: 150,
      density: {
        enable: true,
        value_area: 800
      }
    },
    line_linked:{
      distance: 100,
      opacity: .2,
      width: 2,
    },
    move:{
      speed: 1,
      bounce: true,
    }
  }
}

我直接用

来调用

<div className="background">
            <Particles 
            params = {particalOpt}
            />
          </div>

我似乎无法理解为什么使用背景属性这些粒子不会填充移动设备。

如需完整代码，请转至 https://github.com/13Smat/MySite

提前致谢。

Answer 1

请查看@Drew Reese 的评论并编辑您的问题。

同时我可以提供a helpful example

此处对您最有帮助的属性是 background-size, background-position. You can also look at other background properties that might help。

旁注：React 不会特别改变样式的工作方式，我建议您尝试使用 CSS - 这是学习的最佳方式

Answer 2

问题

背景 div 有 100vw 和 100vh，但 canvas 有自己的宽度和高度，每个都覆盖到 100%。问题是 div 呈现 canvas 没有绝对尺寸供 canvas 继承或相对。

DOM

<div class="background">
  <div id="tsparticles"> // <-- no height/width for canvas to be % of
    <canvas
      class="tsparticles-canvas-el"
      width="558"
      height="281"
      style="width: 100%; height: 100%;" // <-- applied style
    ></canvas>
  </div>
</div>

canvas 元素应用的样式：

element.style {
    width: 100%;
    height: 100%;
}

解决方案

为 #tsparticles div 提供宽度和高度。将以下 CSS 添加到您的 App.css 文件。

#tsparticles {
  width: 100%;
  height: 100%;
}

Answer 3

如果你想让粒子像全屏背景一样我会推荐backgroundMode选项，你可以阅读更多here

您可以像这样设置选项：

{
    backgroundMode: {
        enable: true,
        zIndex: 0
    }
}

如果您将 zIndex 属性设置为负值，请记住将 detectsOn 属性更改为 ”window” 如果您需要鼠标交互

为什么我的 React 站点大小调整不正确？

Why does my React site resize incorrectly?

reactjs

particles.js

react-particles-js

问题

解决方案