我正在使用原始 html、css 和 js 创建一个计算器，并且正在设计计算器本身。但是，我遇到了调整按钮大小的问题，使其保持响应并相对于其容器“行”调整大小。
调整按钮尺寸以使其均匀、适合容器并确保它们保留在各自的容器中的最有效方法是什么？ 谢谢！
* {
border: 1px solid black;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 40vh;
display: flex;
flex-direction: column;
}
.display {
flex: 1;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
}
.num{
margin: 1vh;
position: relative;
padding: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<h1>Calculator</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>这是代码，不要使用边框作为*
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 20vw;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.display {
flex: 1;
border: 1px solid #000;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid #000;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
margin-top: 10px;
}
.num {
width: 18%; /* Set a width to control button size */
height: 100%; /* Make buttons fill the row height */
padding: 10px; /* Add some padding for better touch */
font-size: 1.5em; /* Increase font size for readability */
} <h1>Calculator</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>