旧按钮文本在移动端/缩窗时模糊，替换vw为px无效求助

核心问题 #

旧按钮.Button-transparent03的问题根源在于多个相对单位（vw、vh、em）的联动冲突：

• font-size:1vw在小屏幕（如375px宽手机）下仅为3.75px，完全无法辨认
• 直接替换font-size为px后，按钮的height:6vh、width:17vw、padding:0.2em、line-height:2em仍依赖相对单位，与固定字体尺寸不匹配，导致布局错乱

修复方案 #

调整按钮的尺寸、排版属性，兼顾响应式适配与可读性，以下是修改后的完整代码：

.Button-transparent03 {
  display: inline-flex;
  /* 替换固定vh高度为最小点击高度+内边距，适配内容 */
  min-height: 48px;
  /* 用clamp实现响应式宽度：小屏幕不窄于120px，大屏幕不宽于220px，中间自适应 */
  width: clamp(120px, 17vw, 220px);
  /* 固定内边距，避免em依赖字体尺寸 */
  padding: 8px 12px;
  margin: 0.3em;
  border: 6px solid #2b547e;
  border-radius: 13px;
  /* 响应式字体：小屏幕最小12px，大屏幕最大18px，中间按vw自适应 */
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: bold;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  /* 行高与字体匹配，避免em继承问题 */
  line-height: 1.2;
  word-wrap: break-word;
}

.Button-transparent03:hover {
  color: white;
  background-image: url("/buttons/WTR-landscape.jpg");
}

关键修改说明 #

1. 字体尺寸：用clamp()实现响应式字体，同时限制最小/最大值，兼顾大屏自适应与小屏可读性
2. 按钮高度：替换6vh为min-height:48px，符合移动端按钮最小点击区域标准（48x48px），结合padding让高度自适应内容
3. 按钮宽度：用clamp()限制宽度范围，避免小屏幕下按钮过窄、大屏幕下过宽
4. 内边距与行高：替换em单位为固定px，避免依赖字体尺寸导致的布局波动，行高设为与字体匹配的固定比例

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