HTML 自动调整表单框中手机的按钮大小和字体大小

Question

所以我仍在尝试掌握 html 和 css 的窍门，所以我想做的可能需要一种完全不同的方法。

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

但是正如您从代码中看到的那样，我的按钮和字体都很大。我想要的是一种在 phone 和平板电脑上查看时自动调整按钮大小和字体大小以适应的方法。

下面是我的按钮的 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 自动调整表单框中手机的按钮大小和字体大小

HTML automatically resize button and font size for phones in a form box

html

css

resize

button

autoresize