根据屏幕尺寸响应式引导按钮

Question

我希望这个按钮能够响应，自动调整其大小以适应各种屏幕尺寸。在下面的代码中按钮是固定的并且不移动。 这是代码。

<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

CSS代码：

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: 35px;
  width: 200px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}

Answer 1

您可以通过使用媒体查询来实现这一点。如以下代码所示。

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: auto;
  max-width: 300px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  #btnLogin1 {
  height: auto;
  max-width: 200px;
  padding: 25px 50px;
}
}

<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

Answer 2

尝试使用

vmin

或

vmax

单位。 如果您不想使用媒体查询，请找到适合您的完美值。 有关其工作原理的参考信息，请查看此博客：CSS Units