我已经使用css创建了一个nfl字段。我试图在react中实现一个点击界面，用户可以用鼠标点击球场上的任何区域，然后检索该位置的特定场地。
这里是代码沙箱
我面临几个问题：
我不知道如何使这个字段具有响应性，以便它成为一个可重用的组件。理想情况下，我想使用 react-bootstrap 框架将此字段放置在列和行中，但我不确定如何调整css以使其正常工作。
我用的是mouseevents clientX 及 clientY 精确定位球场上的精确坐标，这样我就能把它们Map到场地上。在我的笔记本电脑屏幕上，我可以在 mapYardCoordinates 功能。但是，分辨率或设备的任何更改都会导致这些x和y值变得不准确。我如何克服这个问题？