如何使我的输入在手机屏幕大小的表单容器中

Question

在大约600px的时候，你可以看到外面的灰色容器开始在右手边向内推，而左侧保持不变，尽管我确实设置了95vw。然后，在558px左右，您可以看到输入字段是如何在容器之外的，尽管我希望它在灰色容器中。我的媒体查询设置为最大宽度500px，但似乎可以工作，并且输入元素确实调整了大小，而我的其他媒体查询似乎不工作。那么我该如何解决这些问题呢？我确实有引导程序，但仅用于输入和按钮等样式目的。我试图在没有网格系统的情况下做到这一点。

<div class="v-header container">
<div class="fullscreen-video-container">
<video autoplay loop muted playsinline>
<source src="/videoImage/Hourglass.mp4">
</video>
</div>
<div class="overlay"></div>
<div class="component-container">
<div class="input-container">
<h1 class="center custom-countdown">Custom Alarm</h1>
<form class="form">
<div class="form-example">
<label for="name" class="form-label">Title </label>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="form-example">
<label for="job-title" class="form-label">Select a date </label>
<input type="date" class="form-control" name="job-title" id="job-title" required>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>

.container {
max-width: 960px;
margin: auto;
}
.fullscreen-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
}
.overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.15);
z-index: 1;
}
.component-container {
min-width: 600px;
min-height: 300px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 5px;
margin: 0 auto;
color: black;
padding: 20px 50px;
background: rgba(255, 255, 255, 0.85);
}
.input-container {
position: relative;
top:0;

}
.form {
min-width: 480px;
margin: 0 auto;
}
.form-example {
margin: 10px 0;
}

@media screen and (max-width: 500px) {
body {
overflow-y: hidden;
}
.component-container {
min-height: 200px;
}
.form {
min-width: unset;
width: 350px;
}

}
@media screen and (max-width: 640px) {
body {
overflow-y: hidden;
}
.component-container {
min-width: unset;
width: 95vw;
}
.form {
width: 350px;
}
}

我的项目的现场演示：https://eloquent-wright-eb9a43.netlify.app

Answer 1

您需要在CSS中添加另一个媒体查询。

@media screen and (max-width: 500px)
.form {
width: 100%;
}

或者编辑现有查询。

@media screen and (max-width: 640px)
.form {
/* width: 350px; */
width: 100%;
}