前端 px 转 rem 全攻略
2025/3/2
介绍前端开发中 px 转换为 rem 的常见做法，包括设置根字体大小、计算 rem 值、使用 rem 单位、动态调整根字体大小，以及借助 CSS 预处理器和 PostCSS 插件实现转换的相关内容。
在前端开发中，将 px 转换为 rem 是一种常见的做法，特别是在需要实现响应式设计时。rem 是相对于根元素（即 <html> 元素）的字体大小的单位。默认情况下，大多数浏览器的根字体大小是 16px，但你可以通过 CSS 来改变这个值。
1. 设置根字体大小
首先，你需要在 CSS 中设置根元素的字体大小。通常，我们会将根字体大小设置为 10px，这样计算起来更加方便。
html {
font-size: 10px;
}
2. 计算 rem 值
假设你有一个元素的宽度是 20px，你想将其转换为 rem。你可以使用以下公式：
rem = px / 根字体大小
在这个例子中，根字体大小是 10px，所以：
20px / 10px = 2rem
因此，20px 等于 2rem。
3. 使用 rem 单位
在 CSS 中，你可以直接使用 rem 单位：
.element {
width: 2rem; /* 相当于 20px */
}
4. 动态调整根字体大小
为了更好的响应式设计，你可以使用媒体查询或 JavaScript 动态调整根字体大小。例如：
@media (max-width: 768px) {
html {
font-size: 8px;
}
}
或者使用 JavaScript：
document.documentElement.style.fontSize = window.innerWidth / 100 + 'px';
5. 使用 CSS 预处理器（如 Sass/Less）
如果你使用 CSS 预处理器，可以编写一个函数来自动将 px 转换为 rem：
@function px-to-rem($px) {
@return ($px / 10) * 1rem;
}
.element {
width: px-to-rem(20); /* 相当于 2rem */
}
6. 使用 PostCSS 插件
如果你使用 PostCSS，可以使用 postcss-pxtorem 插件来自动将 px 转换为 rem：
npm install postcss-pxtorem --save-dev
然后在 postcss.config.js 中配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 10,
propList: ['*'],
},
},
};
这样，你可以在 CSS 中直接写 px，插件会自动将其转换为 rem。
总结
将 px 转换为 rem 是一种常见的响应式设计技术。通过设置根字体大小并使用 rem 单位，你可以更容易地实现响应式布局。使用 CSS 预处理器或 PostCSS 插件可以进一步简化这个过程。