窗口Resize时如何实现A-Z字母按钮自适应缩放解决内容显示不全问题

算力阿峰

2026-10-12

问题原因

你当前的代码存在两个核心问题导致无法自适应：

按钮的font-size使用固定的em单位，仅相对于父元素/根元素字体大小计算，和窗口尺寸无关联，缩放窗口时文字大小不会自动变化
按钮宽高同样使用和窗口无关的em单位，且行容器未配置弹性收缩规则，窗口缩小时按钮总宽度超过屏幕宽度就会溢出

修复方案

你可以通过视口相对单位+弹性收缩规则实现自适应效果，调整后的CSS如下：

.buttons{
  background-color: #009999;
  border: none;
  border-radius: 0.3em;
  color: white;
  text-decoration: none;
  cursor: pointer;
  /* 用flex居中文字，去掉重复的text-align声明 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 用clamp设置字体大小：最小0.8rem，最大1.6rem，中间随窗口宽度自适应 */
  font-size: clamp(0.8rem, 2.2vw, 1.6rem);
  font-weight: bold;
  /* 允许按钮收缩，固定宽高比为1:1保持正方形，设最小宽度避免按钮过小 */
  flex: 1 1 auto;
  aspect-ratio: 1/1;
  min-width: 2em;
  padding: 0.2em ;
  margin: 0.1em;
} 
.firstRow, .secondRow {
  display: flex;
  flex-direction:  row;
  align-items: center;
  padding: 0.2rem;
  list-style-type: none;
  width: 90%;
  /* 统一按钮间距 */
  gap: 0.2em;
}

调整后效果：