如何基于特定字号计算CSS的ch单位来设置元素宽度？

问题根源在于：CSS的ch单位是基于元素**最终生效的font-size**计算的，所以你后续修改font-size会改变ch的基准宽度，导致两个输入框宽度不一致。

结合你使用等宽字体的场景（等宽字体中1ch近似等于1font-size），可以用CSS变量+calc()直接计算出固定宽度，实现「宽度基于18px字体的30ch计算，但实际字体大小可自定义」的需求：

input {
  font-family: monospace;
  /* 定义用于计算宽度的基准字体大小 */
  --base-font-size: 18px;
  /* 直接计算30ch对应的像素宽度（等宽字体下1ch=1font-size） */
  width: calc(30 * var(--base-font-size));
}

#a {
  font-size: 18px;
}

#b {
  font-size: 10px;
}

<input id="a" type="text" placeholder="30ch at 18px font size"><br/>
<input id="b" type="text" placeholder="30ch at 10px font size">

如果是非等宽字体场景，需要先通过浏览器开发者工具确认18px字体下1ch对应的实际像素值，再替换到calc()中。比如假设18px字体下1ch为16px，宽度就写calc(30 * 16px)。

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