用 JavaScript 实现 rem 和 px 的互相转换

可视化大屏往往会用到 ECharts，且可视化大屏也往往需要适配不同的屏幕分辨率。在使用 ECcharts 时，我们会发现它不支持 rem 作为大小属性的单位，只支持 px。但是我们在 CSS 中习惯使用 rem 实现自适应。这就需要在 JavaScript 编写一个函数，用于实现 rem 和 px 单位的互相转换。

这个函数可以自动获取根元素的字体大小，这样省去了手动定义的步骤。

function convertRemPx(value, mode) {
  // 获取根元素font-size大小
  const htmlFontSize = window.getComputedStyle(
    document.documentElement,
  ).fontSize;

  if (mode === "rem") {
    // 转rem
    return `${value / parseFloat(htmlFontSize)}rem`;
  } else if (mode === "px") {
    // 转px
    return `${value * parseFloat(htmlFontSize)}px`;
  } else {
    console.error("参数错误！");
  }
}

使用例：

// 从 rem 转换到 px
const px = convertRemPx(320, "px");

// 从 px 转换到 rem 
const rem = convertRemPx(20, "rem");