时间戳

首页 > 解决方案 > 如何在移动视角上调整文本按钮的大小

html - 如何在移动视角上调整文本按钮的大小

问题描述

我正在尝试在移动透视图中调整按钮的大小，但它的文本也不会调整大小。我正在尝试从移动角度进行操作。也许我应该在这种情况下使用 flex 。

按钮

我如何调整它的大小

HTML：

<ng-container matColumnDef="acoes" style=" position: left;" >
          <button mat-stroked-button color="primary" (click)="gerarCertificado(inscricao)" class="width-button">GERAR CERTIFICADO<mat-icon class="md-15">play_arrow</mat-icon> </button>  
      </ng-container>

CSS：

  @media (max-width: 480px) {
    .width-button{
        max-width: 2%;
    }
  }

标签： htmlcssangular

解决方案

只需修改font-size，button就会相应调整。

button {
  padding: .5rem 1rem;
  font-size: 1.2rem;
}

/*
   You would put this code in your media query, but I'm just emulating the
   device with a class for the example.
*/
button.mobile {
  font-size: .8rem;
}
<button>Desktop</button>
<button class="mobile">Mobile</button>

推荐阅读