Question

我在这里遇到问题，而不是经常遇到的问题。我有这个小的登陆页面：

当我查看以下视口时：

Iphone 6＆amp; 6+风景
Ipad肖像和风景

表单不合适。是因为编码不好，还是就像这样？这意味着总会有关于视口的一些编辑？

@import url(https://fonts.googleapis.com/css?family=Questrial);
 html,
body {
  height: 100%;
  background: center no-repeat fixed url('../images/bg_1.jpg');
  background-size: cover;
  color: #444;
  font-family: 'Questrial', sans-serif;
}
@media (min-width: 768px) {
  h1 {
    font-size: 68px;
  }
}
a {
  color: #999;
}
a:hover {
  color: #111;
}
.catchy-text-wrapper {
  width: 100%;
  text-align: center;
}
#catchyText {
  background-color: red;
  padding: 20px;
  background: rgba(32, 63, 86, 0.8);
  display: inline-block;
}
#emailNews {
  font-size: 20px;
}
/* Round corners on button */

.btn,
.well,
.panel {
  border-radius: 0;
}
.btn-blue {
  background: rgba(32, 63, 86, 1.0);
  border-color: #5491bd;
  border-radius: 10px;
  color: #fff;
}
.btn-huge {
  padding: 17px 22px;
  font-size: 22px;
}
section {
  padding-top: 70px;
  padding-bottom: 50px;
  min-height: 100%;
  min-height: calc(100% - 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#section1 {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
/* Form Config */

input {
  font-size: 16px;
  min-height: 40px;
  border-radius: 25px;
  line-height: 20px;
  padding: 15px 30px 16px;
  border: 1px solid #b9b9af;
  margin-bottom: 10px;
  background-color: #fff;
  opacity: 0.9;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.subscribe-input {
  float: center;
  width: 23%;
  height: 5px;
  text-align: left;
  margin-right: 2px;
}
.btn-placing {
  padding-top: 20px;
  "

}
@media screen and (max-width: 767px) {
  .subscribe-input {
    width: 100%;
  }
}

<section class="container-fluid" id="section1">
  <div class="v-center">
    <h1 class="text-center">COMPANY NAME</h1>
    <h2 class="text-center">Change this <b>subline</b> here</h2>
    <div class="catchy-text-wrapper">
      <h2 class="text-center" id="catchyText">A CATCHY PIECE OF TEXT</h2>
    </div>
    <br>
    <p class="text-center"><i id="emailNews">Enter your email for more news</i>
    </p>
  </div>
  <div class="catchy-text-wrapper">
    <form role="form" action="register.php" method="post" enctype="plain">
      <input type="email" name="email" class="subscribe-input" placeholder="Enter your e-mail address..." required>
    </form>
  </div>
  <p class="text-center btn-placing">
    <a href="#" class="btn btn-blue btn-lg btn-huge lato" data-toggle="modal" data-target="#myModal">Give me the news</a>
  </p>

</section>

Answer 1

您的<input>显示为默认box-sizing: content-box，这意味着您的

@media screen and (max-width: 767px) {
  .subscribe-input {
    width: 100%;
  }
}

应用

后，内容框的大小将变为100％。填充在内容框之外，因此当您添加

时

input {
  padding: 15px 30px 16px;
}

您的<input>比其容器宽60px。

通过将box-sizing: border-box添加到input的样式来解决此问题。

设置视口或优化代码

1 个答案: