如何用CSS修复Angular中按钮在移动端的显示问题

问题说明 #

Angular项目在移动端视图下，按钮元素出现显示异常（图标与文字排版错乱、按钮布局被挤压），以下是对应的代码及CSS修复方案：

原始代码 #

HTML代码 #

<div class="button-containers">
  <button
    mat-stroked-button
    color="primary"
    [routerLink]="'/contracts/create/' + agency?.id">
    <mat-icon>add</mat-icon> New Contract
  </button>
</div>

CSS代码 #

.info-icon {
  cursor: pointer;
  vertical-align: middle;
  height: 16px;
  width: 16px;
  vertical-align: text-bottom;
  margin-right: 0.25em;
}

.fee{
  min-width: 17em;
}

.button-container-reduced {
  padding: 0 1.5em 0 0;
}

.tab-reduced {
  padding: 0;
}

.btn-width-130{
  width: 130px;
}
.button-containers {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 0 1 auto;
  align-items: center;
  flex-wrap: wrap;
}

修复方案 #

添加以下移动端专属CSS规则：

/* 移动端适配规则 */
@media (max-width: 768px) {
  .button-containers {
    justify-content: center; /* 按钮容器改为居中布局，避免靠右侧被视口挤压 */
    padding: 0.5rem;
  }

  .button-containers button {
    flex-direction: column; /* 图标与文字垂直排列，解决横向空间不足导致的错乱 */
    gap: 4px; /* 图标与文字间添加间距，优化视觉 */
    min-width: 110px; /* 保证按钮最小宽度，防止内容乱折行 */
    padding: 0.6rem 1rem; /* 调大按钮内边距，提升移动端触控体验 */
  }

  .button-containers mat-icon {
    font-size: 18px;
    height: 18px;
    width: 18px;
  }
}

修复逻辑 #

• 用@media (max-width: 768px)限定规则仅在移动端生效，不干扰桌面端布局
• 容器居中避免按钮贴靠右侧边缘被挤压
• 按钮内部垂直排列，解决横向空间不足导致的图标文字错位问题
• 设置最小宽度与内边距，既保证按钮视觉完整性，又提升触控区域大小

内容的提问来源于stack exchange，提问作者Mr. Angular