如何让我的输入在移动屏幕尺寸的表单容器中？

Question

在大约 600 像素处，您可以看到外部灰色容器开始在右侧向内推，而左侧保持不变，即使我设置了 95vw。然后，在大约 558 像素处，您可以看到输入字段是如何移出容器的，即使我希望它位于灰色容器内。我设置为最大宽度 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%;
}