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

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那么应用这些规则。