尝试调整按钮内文本的大小

Question

我有一个前辈创建的按钮，但在智能手机或缩小的浏览器窗口上查看时，文本会缩小并且几乎难以辨认。我还创建了自己的按钮，但没有这个问题，但我正在尝试找出如何修复旧按钮并查看问题出在哪里。我想这是因为它们的字体大小是 vw，而我的字体大小是固定的像素量，但我不确定。 :(

/* 旧：*/

.Button-transparent03 {
  display: inline-flex;
  height: 6vh;
  width: 17vw;
  line-height: 2em;
  padding: 0.2em;
  margin: 0.3em;
  border: 6px solid #2b547e;
  border-radius: 13px;
  font-size: 1vw;
  font-weight: bold;
  text-align: center;
  /*   display: flex; */
  justify-content: center;
  align-items: center;
  background-color: transparent;
  word-wrap: break-word;
}
.Button-transparent03:hover {
  color: #001f3f;
  /*    background-color: white; */
  background-image: url("/buttons/WTR-landscape.jpg");
  color: white;
}

/* 新*/

/* Hot Topic Button */
.Button-solid {
  display: inline-flex;
  color: white;
  border: 6px solid #5ce1e6;
  border-radius: 13px;
  font-family: Arial;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  font-weight: bold;
  background-color: #083f5c;
  padding: 10px;
  outline: none;
}
.Button-solid:hover {
  font-size: 18px;
  color: white;
  background-color: #083f5c;
}

我尝试使用 px 而不是 vw 作为旧按钮，但结果只是一团糟。

Answer 1

我创建了一个代码片段，其中包含您的前任旧按钮、您的新按钮以及修改后的旧按钮。

我将测量单位从根据视口大小变化的单位更改为明确定义的单位。从 em & vw/vh 更改为 px 可以实现一致的按钮设计；无论视口大小如何。

添加特定宽度和高度后，一些 CSS 属性最终变得多余，因此我删除了不再相关的属性。

如果按钮需要根据屏幕尺寸进行外观调整，您可以使用媒体查询来完成此操作。我添加了一个 600px 宽的较小屏幕尺寸的示例：

.Button-transparent03 {
  display: inline-flex;
  height: 6vh;
  width: 17vw;
  line-height: 2em;
  padding: 0.2em;
  margin: 0.3em;
  border: 6px solid #2b547e;
  border-radius: 13px;
  font-size: 1vw;
  font-weight: bold;
  text-align: center;
  /*   display: flex; */
  justify-content: center;
  align-items: center;
  background-color: transparent;
  word-wrap: break-word;
}

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


/* NEW */


/* Hot Topic Button */

.Button-solid {
  display: inline-flex;
  color: white;
  border: 6px solid #5ce1e6;
  border-radius: 13px;
  font-family: Arial;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  font-weight: bold;
  background-color: #083f5c;
  padding: 10px;
  outline: none;
}

.Button-solid:hover {
  font-size: 18px;
  color: white;
  background-color: #083f5c;
}


/* REVISED OLD */

.New-Button-transparent03 {
  display: inline-flex;
  height: 35px;
  width: 150px;
  margin: 7px;
  border: 6px solid #2b547e;
  border-radius: 13px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  word-wrap: break-word;
}

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

@media all and (max-width: 600px) {
  .New-Button-transparent03 {
    display: inline-flex;
    height: 25px;
    width: 120px;
    margin: 4px;
    border: 3px solid #2b547e;
    border-radius: 7px;
    font-size: 7px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    word-wrap: break-word;
  }
}

<button class="Button-transparent03">Old Button</button>
<button class="Button-solid">New Button</button>
<button class="New-Button-transparent03">Revised Old Button</button>