有人可以举例说明如何根据容器高度缩放输入字段吗？ 例如，我正在增加屏幕大小，我的div 容器(宽度 && 高度(根据屏幕尺寸而增加，但我无法根据我的div 容器来增加输入字段高度属性。输入字段的宽度会自动增加。所以从字面上看，高度值总是相同的。
为了保持简单明了，div 容器越大，输入字段的高度值就会根据完整的div 容器值而增加。我在div 容器中有 3 个输入字段。
这甚至有可能吗？因为在更大的屏幕上，输入字段的高度看起来真的很小。 我知道媒体查询，但在这种情况下，它们没有帮助。我需要根据不同的大小进行大量媒体查询，例如每 100 像素。
<body>
<div class="flex">
<div class="div">
<h2>Container1</h2>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
<div class="div">
<h2>Container1</h2>
</div>
</div>
</body>
body,html {
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
.flex{
display: flex;
width: 80%;
flex-direction: row;
}
.div{
padding: 2rem;
flex: 50%;
height: 50vh;
}
.div input{
width: 100%;
padding: 0.5rem 0;
margin: 0.5rem 0;
}
这能解决你的问题吗？
body,html {
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
.flex{
display: flex;
width: 80%;
flex-direction: row;
}
.div {
padding: 2rem;
flex: 50%;
height: 70vh;
display: flex;
flex-direction: column;
}
.div form {
display: flex;
flex-direction: column;
height: 100%;
}
.div input{
width: 100%;
padding: 0.5rem 0;
margin: 0.5rem 0;
height: 100%;
}<body>
<div class="flex">
<div class="div">
<h2>Container1</h2>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
<div class="div">
<h2>Container1</h2>
</div>
</div>
</body>