CSS/JS/jQuery如何按指定比例统一缩放元素所有字体大小（打印适配）

不用重写每一条字号规则，两种方案都能实现全局等比例缩放到原大小的75%，优先用纯CSS方案，稳定性最高。

纯CSS方案（首推） #

你现有代码里的字号全是用em单位设置的，em本身就是相对父元素字号计算的单位：父元素字号变了，所有子元素的em值会自动按比例换算，包括你写的1.25em、0.8em这类特殊字号，完全不需要单独修改。
只要加一段打印媒体查询，给报告内容的共同父元素设置基准字号为0.75em即可：

@media print {
  /* 仅缩放报告区域就用div#reportPage，需要全页面缩放就替换为html选择器 */
  div#reportPage {
    font-size: 0.75em;
  }
  /* 可选：字号缩小后可以适当调小单元格内边距，避免留白过多 */
  table#report th,
  table#report td {
    padding: 3px;
  }
}

注意：如果你的页面其他外层容器单独设置过font-size，确保这个缩放规则加在所有报告内容的最外层父元素上，所有需要缩放的元素都在这个父元素内部，就可以实现全量等比例缩放。

JS备选方案（适配混合字号单位场景） #

如果后续你页面里加了用px等固定单位设置的字号，CSS相对继承的方式无法覆盖，可以用原生JS实现自动缩放，不会影响屏幕正常浏览的样式：

const printMedia = window.matchMedia('print');
printMedia.addEventListener('change', (e) => {
  const allEls = document.querySelectorAll('div#reportPage *');
  if (e.matches) {
    // 进入打印场景时，遍历所有元素缩放字号
    allEls.forEach(el => {
      const computedSize = parseFloat(getComputedStyle(el).fontSize);
      el.dataset.originSize = computedSize;
      el.style.fontSize = `${computedSize * 0.75}px`;
    })
  } else {
    // 打印结束后还原原始字号
    allEls.forEach(el => {
      if (el.dataset.originSize) {
        el.style.fontSize = `${el.dataset.originSize}px`;
        delete el.dataset.originSize;
      }
    })
  }
})

这个方案不管你用什么单位设置字号都能生效，但纯CSS方案没有执行时序问题，不会出现打印预览加载时样式闪烁的情况，优先使用。

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