javascript - 响应元素高度应该等于宽度
问题描述
我有以下问题:我正在用 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>
也许有人知道如何帮助我。
谢谢
解决方案
您可以使用 vh 和 vw 代替 % 。
VW:视口宽度 (vw) - 整个视口宽度的百分比 Vh:视口高度 (vh) - 整个视口高度的百分比
推荐阅读
- python - 将 QTABLEWIDGET 的数据(列、行、所有内容……)导出到 SQLITE3
- java - 无法使我的钻石两侧对称
- matlab - 使用多个独立测量的混合效应线性回归模型
- nlp - DialogFlow:按名称指代人
- javascript - 将复杂对象传递给 javsacript 函数与单个 var 的性能差异?
- pyspark - 在 Pyspark 表中附加来自循环的聚合统计信息
- css - 带有顶部和底部两个 flexbox 导航的侧边栏
- javascript - 从 CSV 文件 d3 v5 获取和使用数据
- go - Golang 类型断言失败
- python - 在列表列表中搜索字符串