Question

我有一个包含大型垂直表单的页面，我需要根据屏幕大小调整大小。我希望表单输入在左侧和右侧都有足够的边距缩小。我的css包含如下代码：

.container-register input#search, select {
width: 300px;
}

这使得初始输入宽度相当长，所以我尝试使用@media（max-width）脚本来改变长度，但它看起来非常硬编码。我希望它根据视口无缝更改，而不必为每个可能的视口宽度使用这些@media脚本。我在考虑像flex这样的东西？但是我在使用它时遇到了麻烦。

 <div class="body-content-register">
  <div class="wrapper">

<center><section id="bg" class="zoom-register">
        <div class="box-register">
          <center><h1>Register</h1></center>
          <form class="register">
          <div class="container-register">
            <span class="icon"><i class="fa fa-user"></i></span>
            <input type="search" name="fullname" id="search" placeholder="Full Name">


          </div><br><br><br><br>

      <div class="container-register">
        <span class="icon"><i class="fa fa-envelope"></i></span>
        <input type="search" id="search" placeholder="Email">

      </div><br><br><br><br>

            <div class="container-register">
                <span class="icon"><i class="fa fa-user"></i></span>
                <input type="search" id="search" placeholder="Username">
            </div><br><br><br><br>

            <div class="container-register">
                <span class="icon"><i class="fa fa-birthday-cake"></i></span>
                <input type="search" id="search" placeholder="Date of Birth">
            </div><br><br><br><br>

            <div class="container-register">
                <span class="icon"><i class="fa fa-map-marker"></i></span>
                <input type="search" id="search" placeholder="Postcode">
            </div><br><br><br><br>

            <div class="container-register">
                <span class="icon"><i class="fa fa-key"></i></span>
                <input type="search" id="search" placeholder="Password">
            </div><br><br><br><br>

            <div class="container-register">
                <span class="icon"><i class="fa fa-key"></i></span>
                <input type="search" id="search" placeholder="Confirm Password">
            </div><br><br><br><br>

            <div class="float-middle">

                <input type="checkbox" name="checkbox" value="checkbox"> Do you accept our terms & conditions?<br>
            </div><br>

            <button class="button"><strong>Submit</strong></button>

    </form>
    </div>
  </section></center>
</div>
</div>

Answer 1

除了使用媒体查询，您还可以使用 intrinsic units of measurement like vw and vh 。与问题无关，但我觉得我应该指出#ID必须是唯一的，因此您不能让每个元素都有id='search'。 type的{{1}}属性决定了它的行为，因此<input>并不是您真正需要的。除了type="search"和<div>之外，您还可以使用 more suitable tags ，但这纯粹是可选的。我稍微改变了布局，以反映我之前提到的内容。

演示

<span>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  width: 100vw;
  height: 100vh;
}

.icon {
  display: inline-block;
  margin: 0 0 2vw 2vh;
}

h3 {
  margin: 0
}

.line {
  border: 0;
  width: 96vw;
  margin: 0;
  padding: 0
}

i {
  width: 3vw;
  margin: 0 1vw 0 0;
}

.name {
  display: block
}

#fullName {
  width: 86vw;
}

input {
  font: inherit;
  width: 39vw;
}

.DOB input {
  width: 12vw;
  text-align: center;
}

.disclosure {
  display: block;
  margin: 2vh auto 0;
  width: 80vw;
}

#accept {
  width: 3vw;
}

[type=submit] {
  width: 16vw
}

缩小html项目以匹配屏幕大小？

1 个答案:

演示