Question

我遇到以下问题：我正在用javascript编程游戏，并且希望它具有恢复性。游戏领域是一个包含25个较小正方形的正方形。

现在，我希望我的网站具有响应能力，并且正方形的高度等于其宽度。

我尝试将此宽度设置为％属性，但这没有用。

在下面您可以看到该类应该具有这些属性。

.standart {

  display: flex;
    justify-content: center;
    align-items: center; 
  font-size: 50px;
    width: 5.21%;
    height: 9.26%;
    background: blueviolet;
    border: 2px solid black; 
 }

这是html代码

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Level 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body onload="farbgeber()" >
    <p><div id="Start" onclick="myMover(); wo(); document.getElementById('Start').style.visibility = 'hidden'; document.getElementById('Links').style.visibility = 'hidden'; document.getElementById('Rechts').style.visibility = 'hidden'; document.getElementById('Hoch').style.visibility = 'hidden'; document.getElementById('Runter').style.visibility = 'hidden'; document.getElementById('Löschen').style.visibility = 'hidden'">Start</div> <div id="Restart" onclick="restart() ">Restart</div></p> 
    <a id="l" href="level2.html">Zum nächsten Level</a>
    <!-- <p><button onclick="myMovel()">Links</button></p> 
        <p><button onclick="myMoved()">Runter</button></p> 
        <p><button onclick="myMoveu()">Hoch</button></p> 
        <p><button onclick="klassenwechsel(13)">Wechsel</button></p> -->
        <p><div id = "winlos"></div></p>    
        <div id = rr>
            <div id = Links  onclick="richtfeld = 3"> ← </div>
            <div id = "Rechts"  onclick="richtfeld = 4 ">→</div>
            <div id = Hoch  onclick="richtfeld = 5 ">↑</div>
            <div id = Runter  onclick="richtfeld = 2">↓</div>
            <!-- <div id = DT  onclick="richtfeld = 7 ">DT</div>
            <div id = Ziel  onclick="richtfeld = 6">Z</div> -->
            <div id = Löschen  onclick="richtfeld = 1">X</div>
            <div id = "anzahl"></div>
        </div>

        <div>
            <div id ="animate"></div>
            <div id = r1><div id = "1" onclick="feldersetzen(0,richtfeld)" ></div>
        <div id = 2 onclick="feldersetzen(1,richtfeld)" ></div>
        <div id = "3"onclick="feldersetzen(2,richtfeld)"  ></div>
        <div id = 4 onclick="feldersetzen(3,richtfeld)" ></div>
        <div id = 5 onclick="feldersetzen(4,richtfeld)"  ></div></div>

        <div id = r2>
        <div id = 6 onclick="feldersetzen(5,richtfeld); "></div>
        <div id = 7 onclick="feldersetzen(6,richtfeld)" ></div>
        <div id = 8 onclick="feldersetzen(7,richtfeld)" ></div>
        <div id = 9 onclick="feldersetzen(8,richtfeld)" ></div>
        <div id = 10 onclick="feldersetzen(9,richtfeld)" ></div></div>

        <div id = r3>
        <div id = 11 onclick="feldersetzen(10,richtfeld)" ></div>
        <div id = 12 onclick="feldersetzen(11,richtfeld)" ></div>
        <div id = 13 onclick="feldersetzen(12,richtfeld)" ></div>
        <div id = 14 onclick="feldersetzen(13,richtfeld)" ></div>
        <div id = 15 onclick="feldersetzen(14,richtfeld)" ></div></div>

        <div id = r4>
        <div id = 16 onclick="feldersetzen(15,richtfeld)" ></div>
        <div id = 17 onclick="feldersetzen(16,richtfeld)" ></div>
        <div id = 18 onclick="feldersetzen(17,richtfeld)" ></div>
        <div id = 19 onclick="feldersetzen(18,richtfeld)" ></div>
        <div id = 20 onclick="feldersetzen(19,richtfeld)" ></div></div>

        <div id = r4>
        <div id = 21 onclick="feldersetzen(20,richtfeld)" ></div>
        <div id = 22 onclick="feldersetzen(21,richtfeld)" ></div>
        <div id = 23 onclick="feldersetzen(22,richtfeld)" ></div>
        <div id = 24 onclick="feldersetzen(23,richtfeld)" ></div>
        <div id = 25 onclick="feldersetzen(24,richtfeld)" ></div></div>
        </div>
    <script src="code.js"></script>




</body>
</html>

也许有人知道如何帮助我。

谢谢

Answer 1

您可以使用vh和vw代替％。

VW：视口宽度（vw）–整个视口宽度的百分比 Vh：视口高度（vh）–占整个视口高度的百分比

响应元素的高度应等于宽度

1 个答案: