Css 使游戏响应性更强（适合不同的屏幕尺寸）

我在React JS中从事一个游戏项目。我无法使它响应。 这更像是一个CSS问题，而不是我认为的反应。有人能提出一个方法来纠正这个问题吗。这就是我创建游戏场景的方式

以下是级别的代码：-

import React from "react";
import Scene from "../components/Scene";
import Sobject from "../components/Object";
import Room from "../images/level1/Room.png";
import Bed from "../images/level1/Bed.png";
import Bag from "../images/level1/Bag.png";
import Book from "../images/level1/Books.png";
import Window from "../images/level1/Window.png";
import { Link } from "react-router-dom";
import ReactCountdownClock from "react-countdown-clock";

export default class Level extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      show: false
    };
  }

  render() {
    return (
      <div>
        <Scene>
          <Sobject name={"room"} xPos={0} yPos={0}>
            <img src={Room} height="725" width="1485" />
          </Sobject>
          <Sobject name={"bed"} xPos={20} yPos={280}>
            <img src={Bed} height="445" width="850" />
          </Sobject>
          <Sobject name={"window"} xPos={10} yPos={20}>
            <img src={Window} height="260" width="380" />
          </Sobject>
          <Sobject name={"bag"} xPos={40} yPos={470}>
            <img src={Bag} height="200" />
          </Sobject>

          <Sobject name={"book"} xPos={440} yPos={330}>
            <img src={Book} height="180" width="180" />
          </Sobject>
        </Scene>
      </div>
    );
  }
}

---

您可以尝试在SASS文件中使用转换和媒体查询，如下所示：

SASS代码：

$col-md: 768px;
$col-sm: 576px;  <--------------------------------------------add more of this
.scene-container {
  position:relative;
  width:991px;
  height:auto;
  margin:0 auto;
  @media screen and (max-width: $col-sm) {
     transform:scale(.6);   <---------------------------------addapt this value
  }
  @media screen and (min-width: $col-md) {    <---------------add more of this
     transform:scale(.8);   <---------------------------------and this value
  }
}

$colmd:768px；
$col sm:576px；您需要发布问题的最小表示形式。不要把所有的东西都扔掉，除了厨房的水槽，希望我们能涉水而过，并以某种方式重现所有的东西。事实上，整个代码是相互关联的，所以我不知道如何解释我的问题而不发布所有这些。谢谢你的回复。我是新的反应，我想知道如果这个npm包可以做同样的工作哦，我提供了一个解决办法，可能会帮助其他人在未来。
import React from "react";

export default class Sobject extends React.Component {
  constructor(props) {
    super(props);
    this.name = props.name | "";
    this.type = "generic";
    this.xPos = props.xPos | 0;
    this.yPos = props.yPos | 0;
  }

  render() {
    return (
      <div
        className={"object-container"}
        style={{
          left: this.xPos,
          top: this.yPos
        }}
      >
        {this.props.children}
      </div>
    );
  }
}

.scene-container
  position: absolute
  height: 100vh
  width: 100%
  background-color: black
  cursor: pointer

.object-container
  position: absolute
  cursor: pointer

$col-md: 768px;
$col-sm: 576px;  <--------------------------------------------add more of this
.scene-container {
  position:relative;
  width:991px;
  height:auto;
  margin:0 auto;
  @media screen and (max-width: $col-sm) {
     transform:scale(.6);   <---------------------------------addapt this value
  }
  @media screen and (min-width: $col-md) {    <---------------add more of this
     transform:scale(.8);   <---------------------------------and this value
  }
}