在进行 px 换算 rem 时，需要先明确一个参考的根元素（<html> ）字体大小设定值（以下用 baseFontSize 表示这个基础字体大小 ），换算公式为：
rem = px / baseFontSize
以下是几种常见情况：
浏览器默认情况（通常）
在大多数浏览器默认情况下，根元素字体大小为 16px ，如果以此为基准：
比如要将 20px 换算为 rem 则 20px 换算为 rem = 20 / 16 = 1.25rem 125。
自行设定根元素字体大小
如果在样式表中通过 CSS 规则设置了根元素字体大小为其他值，比如设置 html { font-size: 60px; } ，那么如果要将 100px 换算为 rem ： 100px 换算为 rem = 100 / 60 ≈ 1.67rem 。
在代码中动态计算（以 JavaScript 为例实现根据屏幕宽度动态设置根字体大小并换算）
以下是一个简单示例代码用于根据屏幕宽度动态设置根字体大小并进行 px 到 rem 的换算思路（假设设计宽度是 750px ，想让 750px 在特定情况下等于 10rem ，根据屏幕宽度等比调整 ）：
function pxToRem(pxValue) {
const designWidth = 750; // 设计稿宽度
const rootFontSize = window.innerWidth / (designWidth / 10); // 计算根字体大小
document.documentElement.style.fontSize = rootFontSize + 'px';
return pxValue / rootFontSize;
}
// 调用示例
const px = 200;
const remValue = pxToRem(px);
console.log(remValue + "rem");
在实际的前端开发中，特别是响应式开发场景下，为了方便统一管理和计算 px - rem ，还会使用一些预处理器（如 Less、Sass ）插件或者后处理工具（如 PostCSS 插件 如 postcss-pxtorem 等）来自动根据设定规则进行转换
