当元素字体为像素定义时，如何相对增大其字号？

你之前用.adjuster类设置font-size:125%没达到预期，核心原因是CSS的百分比字号是相对父元素的字号计算的，不是基于元素自身原来的像素值。比如你的.main设了15px，若父元素是默认16px，125%会变成20px，这不是你要的15px×1.25=18.75px的效果，甚至如果样式优先级没处理好，连这个都不会生效。

下面给你两种实用的解决方案，都能在非body容器的场景下实现字号比例增减：

方案一：CSS变量（推荐，无JS依赖） #

把元素的原字号存为CSS自定义属性，再用calc()基于这个变量计算缩放后的大小，完美适配你的需求：

.main {
  --base-font-size: 15px; /* 将原字号存入变量 */
  font-size: var(--base-font-size);
  margin: 8px;
}

.adjuster {
  /* 基于原字号放大25% */
  font-size: calc(var(--base-font-size) * 1.25);
}

你的JS代码不用改，点击按钮添加/移除.adjuster类就能生效，字号会精确变成18.75px。

方案二：JS动态计算（适合无法修改原有CSS的场景） #

如果不能改动.main的原有样式，用JS读取元素当前的计算字号，再按比例调整：

// 先记录原始字号
let originalFontSize;
window.onload = () => {
  originalFontSize = getComputedStyle(container).fontSize;
};

function increase() {
  const currentSize = parseFloat(getComputedStyle(container).fontSize);
  container.style.fontSize = `${currentSize * 1.25}px`;
}

function decrease() {
  // 恢复原始字号
  container.style.fontSize = originalFontSize;
}

// 若要支持多次连续增减（比如点一次加25%，再点再加25%），可以改成：
/*
function increase() {
  const currentSize = parseFloat(getComputedStyle(container).fontSize);
  container.style.fontSize = `${currentSize * 1.25}px`;
}

function decrease() {
  const currentSize = parseFloat(getComputedStyle(container).fontSize);
  container.style.fontSize = `${currentSize / 1.25}px`;
}
*/

这种方法不需要改CSS，完全通过JS控制，灵活度更高。

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