Reactjs 用于移动设备的React web app中的粒子和高度控制

目前正在学习，所以道歉

我正在React.js中创建一个web应用程序，并已成功导入React粒子js，当前为：

<Particles
            canvasClassName="example"
            params={{
                "particles": {
                "number": {
                "value": 200
            },
            "size": {
            "value": 3
            }
           },
            "interactivity": {
            "events": {
            "onhover": {
                "enable": true,
                "mode": "repulse"
             }
            }
            }
        }} />

这在大屏幕上观看时效果很好，但在手机上观看时会变得非常混乱。因此，我想知道的是如何根据小屏幕上的情况将值从200减少到更小的值，并增加粒子画布的高度

目前，它在移动模式下看起来是这样的：

---

非常感谢

尝试将

tsparticles

依赖项升级到1.17.12，如果这不起作用，请尝试

react tsparticles

1.17.12，这里报告了一个视网膜错误。这不回答我的问题吗？我并不是要减少手机的粒子数。这是视网膜显示器的一个缺陷，显示的粒子比配置的要多