如何创建相同的纵横比来对齐按钮和增量计数器的大小？

Question

我已经创建了一个增量计数器页面来收集足球比赛的统计数据，但是增量“0”的文本不会随着按钮大小而改变。我正在尝试让所有按钮在不滚动的情况下适合屏幕。

Larger buttons are unchanged. but the smaller buttons are set at a height to 4% as there are 24 rows of buttons.

每一行的代码是：

.row5{
display: flex;
text-align: center
}

按钮设置为：

.button{

  color: #000000;
  background-color: #ffffff;
  font-weight: bold;
  font-size-adjust: auto;
  width: 16%;
  padding:0;
  margin:0;
  border-color: #ff9900;
  height:4%;
  }

请有人帮忙更改“0”的文本大小，但使其与按钮大小成比例。例如，我知道我可以将字体大小更改为 10px，但我认为这对在较小的屏幕上工作没有帮助。

希望这是有道理的。预先感谢任何答案。

Answer 1

您可以使用 font-size: clamp(value1, value2, value3) 进行响应 font-sizes。

第一个值是最小值 - font-size 永远不会低于您在此处设置的值。

第二个值是首选值。该元素将尝试将 font-size 设置为此值。

最后一个值是最大值值。元素的字体大小永远不会超过这个。

至于设置值，我建议使用 em、rem 或 vw 单位以获得完全响应的效果。在 font-size 属性上使用 em 单位允许设置元素的字体大小相对于其父元素的字体大小。当父元素的大小改变时，子元素的大小会自动改变。

在 font-size-属性上阅读有关 em 和 rem 的更多信息： https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/

尝试一下这些值！尝试使用示例片段在新选项卡中调整浏览器大小，看看 clamp() 的效果如何。

body {
  width: 800px;
  font-size: 20px;
}

div {
  width: 50%;
  font-size: clamp(0.5em, 4vw, 3em);
}

<body>
  <div>
    Font size
  </div>
</body>

如何创建相同的纵横比来对齐按钮和增量计数器的大小？

How can I create the same aspect ratio to align size of button and increment counter?

html

css

increment