Angular中mat-icon-button使用calc()结合min/max实现字体大小自适应问题

先纠正你之前写法的几个核心问题：

• calc(100%) 里的100%是继承父元素的字体大小，并非容器宽度的比例，所以无法实现随容器缩放的效果。
• 嵌套写法 min(max(calc(100%), 2rem), 1rem) 逻辑完全错误：max(calc(100%),2rem) 会取不小于2rem的值，再和1rem取min，结果永远是1rem，完全达不到动态缩放的目的。

下面是几种符合需求的实现方案：

方案1：用clamp实现平滑缩放（推荐） #

clamp(min, preferred, max) 可以直接限制字体大小的范围，同时让中间值随视窗/容器宽度动态变化，兼顾可读性和适配性。

如果你希望字体最小0.75rem，最大2rem，中间按1.5vw的比例缩放：

.mat-button {
  font-size: clamp(0.75rem, 1.5vw, 2rem);
}

• 当1.5vw小于0.75rem时，字体固定为0.75rem（避免过小影响阅读）
• 当1.5vw大于2rem时，字体固定为2rem（避免过大破坏布局）
• 中间区间内，字体随视窗宽度按1.5vw的比例动态调整

方案2：基于容器宽度缩放（容器查询） #

如果按钮的缩放基准是父容器而非整个视窗，可使用容器查询（需浏览器支持）：

1. 先定义容器上下文：

.button-container {
  container-type: inline-size; /* 将父容器设为缩放基准 */
}

2. 设置按钮字体大小：

.mat-button {
  font-size: clamp(0.75cqw, 1.5cqw, 2rem);
}

• cqw 是容器宽度百分比单位，1cqw = 容器宽度的1%
• 逻辑和方案1一致，只是缩放基准从视窗切换为父容器

方案3：断点式切换（媒体/容器查询） #

如果你希望在特定宽度阈值处直接切换字体大小，而非平滑缩放：

基于视窗宽度的媒体查询 #

/* 视窗宽度≥800px时用1.5vw */
@media (min-width: 800px) {
  .mat-button {
    font-size: 1.5vw;
  }
}

/* 视窗宽度<800px时用0.75vw */
@media (max-width: 799px) {
  .mat-button {
    font-size: 0.75vw;
  }
}

基于容器宽度的容器查询 #

.button-container {
  container-type: inline-size;
}

/* 容器宽度≥800px时用1.5cqw */
@container (min-width: 800px) {
  .mat-button {
    font-size: 1.5cqw;
  }
}

/* 容器宽度<800px时用0.75cqw */
@container (max-width: 799px) {
  .mat-button {
    font-size: 0.75cqw;
  }
}

内容的提问来源于stack exchange，提问作者c0micrage