求助：网站字体大小调整按钮功能失效问题（REM单位场景）

你的脚本失效主要有三个核心问题：

1. 获取的字体单位错误：$('body').css('font-size')返回的是浏览器计算后的px值（而非你设置的rem），直接转成rem会导致数值完全偏离预期。
2. 数值处理错误：parseInt()会丢弃小数部分，导致+0.1/-0.1的步长操作完全无效，甚至会把原本的rem基数错误放大。
3. DOM加载顺序问题：脚本可能在页面元素未渲染完成时就执行，导致无法找到#font-size-plus等按钮元素。

修正后的脚本 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 等待DOM完全加载后执行
$(function() {
  // 初始化基准字体大小（默认body的font-size为1rem，可根据你的初始设置调整）
  let currentFontSize = 1;

  $('#font-size-plus').on('click', function() {
    // 每次增加0.1rem，可根据需求调整步长
    currentFontSize += 0.1;
    $('body').css('font-size', currentFontSize + 'rem');
  });

  $('#font-size-minus').on('click', function() {
    // 限制最小字体，避免过小影响可读性
    if (currentFontSize > 0.6) {
      currentFontSize -= 0.1;
      $('body').css('font-size', currentFontSize + 'rem');
    }
  });

  $('#_reset').on('click', function() {
    // 重置回初始值
    currentFontSize = 1;
    $('body').css('font-size', currentFontSize + 'rem');
  });
});
</script>

额外优化：避免图片受影响 #

因为你全站用rem，若图片也用了rem作为尺寸单位，会随body字体大小缩放。要解决这个问题，只需给图片单独设置非rem单位的尺寸：

img {
  /* 用固定px或相对视口的vw单位，避免继承rem缩放 */
  width: auto;
  height: auto;
  max-width: 100%;
  /* 或者直接设置固定值，比如：width: 300px; */
}

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