Question

所以我仍然试图抓住html和css的悬念，所以我想要做的就是需要一种完全不同的方法。

所以现在当我在手机上查看我的网站时，表单会自动调整大小，但我的按钮目前没有。

但是从代码中可以看出，我的按钮和字体都非常大。我想要的是一种在手机和平板电脑上查看时自动调整按钮大小和字体大小的方法。

下面是我按钮的css代码。

谢谢

<form>
<input type="email" name="email" id="email" class="field-style field-split align-left set-width" placeholder="Your Email" />
</br>
</br>
<btn>
<input type="submit" name="Subscribe"  value="GET THE FREE COURSE NOW" id="submit" />
</btn>
</form>

.form-style-9 btn input[type="button"],
.form-style-9 btn input[type="submit"] {
  background: #3cd934;
  background-image: -webkit-linear-gradient(top, #3cd934, #2b8016);
  background-image: -moz-linear-gradient(top, #3cd934, #2b8016);
  background-image: -ms-linear-gradient(top, #3cd934, #2b8016);
  background-image: -o-linear-gradient(top, #3cd934, #2b8016);
  background-image: linear-gradient(to bottom, #3cd934, #2b8016);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 27px;
  padding: 11px 20px 10px 20px;
  text-decoration: none;
}

.form-style-9 btn input[type="button"]:hover,
.form-style-9 btn input[type="submit"]:hover {
  background: #256e13;
  background-image: -webkit-linear-gradient(top, #256e13, #1d520f);
  background-image: -moz-linear-gradient(top, #256e13, #1d520f);
  background-image: -ms-linear-gradient(top, #256e13, #1d520f);
  background-image: -o-linear-gradient(top, #256e13, #1d520f);
  background-image: linear-gradient(to bottom, #256e13, #1d520f);
 text-decoration: none;
}

Answer 1

您可以使用media queries

@media (max-width: 300px) {
    btn {
        width: 50px;
        font-size:10px;
    }
}

以上是说如果屏幕尺寸为<= 300px，则应用这些规则。

HTML会自动调整表单框

1 个答案: