getBoundingClientRect能否返回rem单位的数值？

首先明确结论：getBoundingClientRect 是浏览器原生API，没有内置返回rem单位的能力，它的所有返回值固定为相对于视口的像素（px）绝对值，没有可配置的参数切换单位。

要拿到rem单位的尺寸，只需做一步简单的单位转换即可，实现成本很低，完全可以满足你简化代码的需求：

1. 先获取当前根元素<html>的计算后字体大小，也就是1rem对应的px基准值
2. 将getBoundingClientRect返回的px数值除以这个基准值，就能得到对应的rem数值

你可以直接用下面的封装函数，调用方式和原生getBoundingClientRect完全一致，返回值的属性也完全对齐，不需要修改原有业务逻辑的结构：

// 获取当前1rem对应的px值
const get1RemInPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);

// 封装返回rem单位的getBoundingClientRect
const getBoundingClientRectRem = (el) => {
  const rectPx = el.getBoundingClientRect();
  const remBase = get1RemInPx();
  return Object.fromEntries(
    Object.entries(rectPx).map(([key, val]) => [key, val / remBase])
  );
};

调用示例 #

const targetEl = document.querySelector('.your-element');
// 直接获取rem单位的尺寸数据
const rectRem = getBoundingClientRectRem(targetEl);
// 输出元素宽度的rem值
console.log(rectRem.width);

注意事项 #

• 如果你的项目用了动态修改根字体大小的响应式适配方案，不要缓存get1RemInPx()的返回值，每次调用时会自动取最新的根字体大小计算，避免数值偏差
• 返回值为纯数值，如果需要用于样式赋值，自行拼接rem单位即可：targetEl.style.width = ${rectRem.width + 2}rem``

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